Markdown语法示例

Aside 提示组件

依次展示为：代码 - 效果。

note

1
:::note[这是标题]
2
这是一个很长的描述信息。
3
:::

tip

1
:::tip[这是标题]
2
这是一个很长的描述信息。
3
:::

danger

1
:::danger[这是标题]
2
这是一个很长的描述信息。
3
:::

caution

1
:::caution[这是标题]
2
这是一个很长的描述信息。
3
:::

代码块

给代码块添加标题

代码

1
\`\`\`ts title=hello.ts
2
console.log("Hello world!");
3
\`\`\`

效果

1
console.log("Hello world!");

高亮某些文字

代码

1
\`\`\`ts "console"
2
console.log("Hello");
3
console.log("world!");
4
\`\`\`

效果

1
console.log("Hello world!");
2
console.log("world!");

高亮某些行

代码

1
\`\`\`ts {3, 5-7}
2
import { MarkdownInstance } from "astro";
3

4
export const formatDate = (pubDate: string) => {
5
  var options: Intl.DateTimeFormatOptions = {
6
  weekday: 'short',
7
  year: 'numeric',
8
  month: 'long',
9
  day: 'numeric'
10
};
11

12
  return new Date(pubDate).toLocaleDateString('en-US', options);
13
}
14

15
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
16
  const pubDateA = new Date(a.frontmatter.pubDate);
17
  const pubDateB = new Date(b.frontmatter.pubDate);
18
  if (pubDateA < pubDateB) {
19
    return 1;
20
  }
21
  if(pubDateA > pubDateB) {
22
    return -1;
23
  }
24
  return 0;
25
}
26
\`\`\`

效果

1
import { MarkdownInstance } from "astro";
2

3
export const formatDate = (pubDate: string) => {
4
  var options: Intl.DateTimeFormatOptions = {
5
  weekday: 'short',
6
  year: 'numeric',
7
  month: 'long',
8
  day: 'numeric'
9
};
10

11
  return new Date(pubDate).toLocaleDateString('en-US', options);
12
}
13

14
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
15
  const pubDateA = new Date(a.frontmatter.pubDate);
16
  const pubDateB = new Date(b.frontmatter.pubDate);
17
  if (pubDateA < pubDateB) {
18
    return 1;
19
  }
20
  if(pubDateA > pubDateB) {
21
    return -1;
22
  }
23
  return 0;
24
}

新增或删除

代码

1
\`\`\`ts ins={3, 5-7} del={6-8, 17-22}
2
import { MarkdownInstance } from "astro";
3

4
export const formatDate = (pubDate: string) => {
5
  var options: Intl.DateTimeFormatOptions = {
6
  weekday: 'short',
7
  year: 'numeric',
8
  month: 'long',
9
  day: 'numeric'
10
};
11

12
  return new Date(pubDate).toLocaleDateString('en-US', options);
13
}
14

15
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
16
  const pubDateA = new Date(a.frontmatter.pubDate);
17
  const pubDateB = new Date(b.frontmatter.pubDate);
18
  if (pubDateA < pubDateB) {
19
    return 1;
20
  }
21
  if(pubDateA > pubDateB) {
22
    return -1;
23
  }
24
  return 0;
25
}
26
\`\`\`

效果

1
import { MarkdownInstance } from "astro";
2

3
export const formatDate = (pubDate: string) => {
4
  var options: Intl.DateTimeFormatOptions = {
5
  weekday: 'short',
6
  year: 'numeric',
7
  month: 'long',
8
  day: 'numeric'
9
};
10

11
  return new Date(pubDate).toLocaleDateString('en-US', options);
12
}
13

14
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
15
  const pubDateA = new Date(a.frontmatter.pubDate);
16
  const pubDateB = new Date(b.frontmatter.pubDate);
17
  if (pubDateA < pubDateB) {
18
    return 1;
19
  }
20
  if(pubDateA > pubDateB) {
21
    return -1;
22
  }
23
  return 0;
24
}

显示行号

代码

1
\`\`\`ts showLineNumbers
2
console.log("Hello");
3
console.log("world!");
4
\`\`\`

效果

1
console.log("Hello world!");
2
console.log("world!");

折叠某些行

代码

1
\`\`\`ts collapse={4-6}
2
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
3
  const pubDateA = new Date(a.frontmatter.pubDate);
4
  const pubDateB = new Date(b.frontmatter.pubDate);
5
  if (pubDateA < pubDateB) {
6
    return 1;
7
  }
8
  if(pubDateA > pubDateB) {
9
    return -1;
10
  }
11
  return 0;
12
}
13
\`\`\`

效果

1
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
2
  const pubDateA = new Date(a.frontmatter.pubDate);
3
  const pubDateB = new Date(b.frontmatter.pubDate);
3 collapsed lines
4
  if (pubDateA < pubDateB) {
5
    return 1;
6
  }
7
  if(pubDateA > pubDateB) {
8
    return -1;
9
  }
10
  return 0;
11
}

案例汇总

1
const binaryStringToArray = (binaryString: string | undefined) => {
5 collapsed lines
2
  if (!binaryString) {
3
    return [];
4
  }
5

6
  return binaryString.split("").map((char) => parseInt(char, 10));
7
};
8

9

10
const IChingIcon = ({ base, value }: IconProps) => {
11
  const valueArray = binaryStringToArray(value);
12

13
  return (
14
    <svg
15
      key={value}
16
      fill="none"
17
      height={base ? "24" : "48"}
18
      viewBox={base ? "0 0 24 24" : "0 0 24 48"}
19
      width="24"
20
      xmlns="http://www.w3.org/2000/svg"
21
    >
22
      {valueArray.map((value, index) => {
23
        if (value === 0) {
24
          return (
25
            <React.Fragment key={index}>
26
              <rect
27
                key={`left-${index}`}
28
                fill="currentColor"
29
                height="4"
30
                width="10"
31
                x="0"
32
                y={8 * index + 2}
33
              />
34
              <rect
35
                key={`right-${index}`}
36
                fill="currentColor"
37
                height="4"
38
                width="10"
39
                x="14"
40
                y={8 * index + 2}
41
              />
42
            </React.Fragment>
43
          );
44
        } else {
45
          return (
46
            <rect
47
              key={index}
48
              fill="#FF0000"
49
              height="4"
50
              width="24"
51
              x="0"
52
              y={8 * index + 2}
53
            />
54
          );
55
        }
56
      })}
57
    </svg>
58
  );
59
};

Share to X