Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Heading 2 Badge Badge

Heading 3 Badge Badge

Heading 4 Badge Badge

Body content.

@property CSS at-rule is part of the CSS Houdini API which allows developers to explicitly define CSS custom properties, enabling type-checking, default values, and inheritance.

The introduction of @property greatly enhances CSS capabilities.

Bold text: Bold Text

Italic text: Italic Text

Strikethrough

Highlighted text: Marked Text

Mathematical expression: $-(2^{n-1})$ ~ $2^{n-1} - 1$

$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$

19th^

H₂O

Centered content

Right-aligned content

• Unordered List 1
• Unordered List 2
• Unordered List 3

1. Ordered List 1
2. Ordered List 2
3. Ordered List 3

• Task List 1
• Task List 2
• Task List 3
• Task List 4

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Quoted content

Quoted content

Link

External Link

Badge:

• info badge
• tip badge
• warning badge
• danger badge

Icons:

• home -
• vscode -
• twitter -

demo wrapper:

Example

main

aside

Code:

const a = 1;
const b = 2;
const c = a + b;


const obj = {
  toLong: {
    deep: {
      deep: {
        deep: {
          value:
            "this is to long text. this is to long text. this is to long text. this is to long text.",
        },
      },
    },
  },
};

Code Blocks TwoSlash:

// @errors: 2339
const welcome = "Tudo bem gente?";
const words = welcome.contains(" ");

import express from "express";
const app = express();
app.get("/", (req, res) => {
  res.send;
});
app.listen(3000);

import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["nord"],
  langs: ["javascript"],
});
// @log: Custom log message
const a = 1;
// @error: Custom error message
const b = 1;
// @warn: Custom warning message
const c = 1;
// @annotate: Custom annotation message

// @errors: 2540
interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users".toUpperCase(),
  //  ^?
};

todo.title = "Hello";

Number.parseInt("123", 10);
//      ^|

//
//

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
</template>

Code Grouping:

tab1

const a = 1;
const b = 2;
const c = a + b;

tab2

const a: number = 1;
const b: number = 2;
const c: number = a + b;

Code Block Highlighting:

function foo() {
  const a = 1;

  console.log(a);

  const b = 2;
  const c = 3;

  console.log(a + b + c);
  console.log(a + b);
}

Code Block Focus:

function foo() {
  const a = 1;
}

Title Only

Note

Note content link inline code

const a = 1;
const b = 2;
const c = a + b;

Information

Information content link inline code

const a = 1;
const b = 2;
const c = a + b;

Tip

Tip content link inline code

const a = 1;
const b = 2;
const c = a + b;

Warning

Warning content link inline code

const a = 1;
const b = 2;
const c = a + b;

Error

Error content link inline code

const a = 1;
const b = 2;
const c = a + b;

Important

Important content link inline code

const a = 1;
const b = 2;
const c = a + b;

Detailed Title

Here is the content.

GFM alert:

Note

note

Info

info

Tips

tip

Warning

warning

Caution

caution

Important

important

Code Demonstration:

Regular Example

A regular example

HTML

<div id="app">
  <h3>vuepress-theme-plume</h3>
</div>

Javascript

const a = "So Awesome!";
const app = document.querySelector("#app");
app.appendChild(window.document.createElement("small")).textContent = a;

CSS

#app {
  font-size: 2em;
  text-align: center;
}

Tabs:

Title 1

Content block

Title 2

Content block

Warning

Title 1

Content block

Title 2

Content block

Footnotes:

Footnote 1 link^[1].

Footnote 2 link^[2].

Inline footnote^[3] definition.

Repeated footnote definition^[2:1].

---

1. Footnote can contain special markup

   It can also consist of multiple paragraphs ↩︎

2. Footnote text. ↩︎ ↩︎

3. Inline footnote text ↩︎

Copyright

This article link:/article/gk5drfor/

License under:Attribution-NonCommercial 4.0 International (CC-BY-NC-4.0)