Astro-Theme-Live_Flow - undefined

Github markdown-alert

Sat, 04 Apr 2026 06:01:14 GMT

Note

I am NOTE

Tip

I am TIP

Important

I am IMPORTANT

Warning

I am WARNING

Caution

I am CAUTION

GFM

Tue, 31 Mar 2026 11:15:58 GMT

更新

Basic writing and formatting syntax

Create sophisticated formatting for your prose and code on GitHub with simple syntax.

Headings

To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.

# A first-level heading
## A second-level heading
### A third-level heading

When you use two or more headings, GitHub automatically generates a table of contents that you can access by clicking the "Outline" menu icon within the file header. Each heading title is listed in the table of contents and you can click a title to navigate to the selected section.

Styling text

You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

Style	Syntax	Keyboard shortcut	Example	Output
Bold	` ` or `__ __`	`Command`+`B` (Mac) or `Ctrl`+`B` (Windows/Linux)	`This is bold text`	This is bold text
Italic	`* *` or `_ _`	`Command`+`I` (Mac) or `Ctrl`+`I` (Windows/Linux)	`_This text is italicized_`	This text is italicized
Strikethrough	`~~ ~~` or `~ ~`	None	`~~This was mistaken text~~`	~~This was mistaken text~~
Bold and nested italic	` ` and `_ _`	None	`This text is _extremely_ important`	*This text is extremely* important**
All bold and italic	`* *`	None	`*All this text is important*`	All this text is important
Subscript	`<sub> </sub>`	None	`This is a <sub>subscript</sub> text`	This is a _subscript text
Superscript	`<sup> </sup>`	None	`This is a <sup>superscript</sup> text`	This is a ^superscript text
Underline	`<ins> </ins>`	None	`This is an <ins>underlined</ins> text`	This is an underlined text

Quoting text

You can quote text with a >.

Text that is not a quote

> Text that is a quote

Quoted text is indented with a vertical line on the left and displayed using gray type.

Note

When viewing a conversation, you can automatically quote text in a comment by highlighting the text, then typing R. You can quote an entire comment by clicking , then Quote reply. For more information about keyboard shortcuts, see Keyboard shortcuts.

Quoting code

You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. You can also press the Command+E (Mac) or Ctrl+E (Windows/Linux) keyboard shortcut to insert the backticks for a code block within a line of Markdown.

Use `git status` to list all new or modified files that haven't yet been committed.

To format code or text into its own distinct block, use triple backticks.

Some basic Git commands are:
```
git status
git add
git commit
```

For more information, see Creating and highlighting code blocks.

If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on GitHub. For more information, see About writing and formatting on GitHub.

Supported color models

In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

The background color is `#ffffff` for light mode and `#000000` for dark mode.

Here are the currently supported color models.

Color	Syntax	Example
HEX	`#RRGGBB`	`#0969DA`
RGB	`rgb(R,G,B)`	`rgb(9, 105, 218)`
HSL	`hsl(H,S,L)`	`hsl(212, 92%, 45%)`

Note

A supported color model cannot have any leading or trailing spaces within the backticks.
The visualization of the color is only supported in issues, pull requests, and discussions.

Links

You can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ). You can also use the keyboard shortcut Command+K to create a link. When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.

You can also create a Markdown hyperlink by highlighting the text and using the keyboard shortcut Command+V. If you'd like to replace the text with the link, use the keyboard shortcut Command+Shift+V.

This site was built using [GitHub Pages](https://pages.github.com/).

Note

GitHub automatically creates links when valid URLs are written in a comment. For more information, see Autolinked references and URLs.

Section links

You can link directly to any section that has a heading. To view the automatically generated anchor in a rendered file, hover over the section heading to expose the icon and click the icon to display the anchor in your browser.

If you need to determine the anchor for a heading in a file you are editing, you can use the following basic rules:

Letters are converted to lower-case.
Spaces are replaced by hyphens (-). Any other whitespace or punctuation characters are removed.
Leading and trailing whitespace are removed.
Markup formatting is removed, leaving only the contents (for example, _italics_ becomes italics).
If the automatically generated anchor for a heading is identical to an earlier anchor in the same document, a unique identifier is generated by appending a hyphen and an auto-incrementing integer.

For more detailed information on the requirements of URI fragments, see RFC 3986: Uniform Resource Identifier (URI): Generic Syntax, Section 3.5.

The code block below demonstrates the basic rules used to generate anchors from headings in rendered content.

# Example headings

## Sample Section

## This'll be a _Helpful_ Section About the Greek Letter Θ!
A heading containing characters not allowed in fragments, UTF-8 characters, two consecutive spaces between the first and second words, and formatting.

## This heading is not unique in the file

TEXT 1

## This heading is not unique in the file

TEXT 2

# Links to the example headings above

Link to the sample section: [Link Text](#sample-section).

Link to the helpful section: [Link Text](#thisll-be-a-helpful-section-about-the-greek-letter-Θ).

Link to the first non-unique section: [Link Text](#this-heading-is-not-unique-in-the-file).

Link to the second non-unique section: [Link Text](#this-heading-is-not-unique-in-the-file-1).

Note

If you edit a heading, or if you change the order of headings with "identical" anchors, you will also need to update any links to those headings as the anchors will change.

Relative links

You can define relative links and image paths in your rendered files to help readers navigate to other files in your repository.

A relative link is a link that is relative to the current file. For example, if you have a README file in root of your repository, and you have another file in docs/CONTRIBUTING.md, the relative link to CONTRIBUTING.md in your README might look like this:

[Contribution guidelines for this project](docs/CONTRIBUTING.md)

GitHub will automatically transform your relative link or image path based on whatever branch you're currently on, so that the link or path always works. The path of the link will be relative to the current file. Links starting with / will be relative to the repository root. You can use all relative link operands, such as ./ and ../.

Your link text should be on a single line. The example below will not work.

[Contribution
guidelines for this project](docs/CONTRIBUTING.md)

Relative links are easier for users who clone your repository. Absolute links may not work in clones of your repository - we recommend using relative links to refer to other files within your repository.

Custom anchors

You can use standard HTML anchor tags (<a name="unique-anchor-name"></a>) to create navigation anchor points for any location in the document. To avoid ambiguous references, use a unique naming scheme for anchor tags, such as adding a prefix to the name attribute value.

Note

Custom anchors will not be included in the document outline/Table of Contents.

You can link to a custom anchor using the value of the name attribute you gave the anchor. The syntax is exactly the same as when you link to an anchor that is automatically generated for a heading.

For example:

# Section Heading

Some body text of this section.

<a name="my-custom-anchor-point"></a>
Some text I want to provide a direct link to, but which doesn't have its own heading.

(… more content…)

[A link to that custom anchor](#my-custom-anchor-point)

Tip

Custom anchors are not considered by the automatic naming and numbering behavior of automatic heading links.

Line breaks

If you're writing in issues, pull requests, or discussions in a repository, GitHub will render a line break automatically:

This example
Will span two lines

However, if you are writing in an .md file, the example above would render on one line without a line break. To create a line break in an .md file, you will need to include one of the following:

Include two spaces at the end of the first line.
```
This example  
Will span two lines
```
Include a backslash at the end of the first line.
```
This example\
Will span two lines
```
Include an HTML single line break tag at the end of the first line.
```
This example<br/>
Will span two lines
```

If you leave a blank line between two lines, both .md files and Markdown in issues, pull requests, and discussions will render the two lines separated by the blank line:

This example

Will have a blank line separating both lines

Images

You can display an image by adding ! and wrapping the alt text in [ ]. Alt text is a short text equivalent of the information in the image. Then, wrap the link for the image in parentheses ().

GitHub supports embedding images into your issues, pull requests, discussions, comments and .md files. You can display an image from your repository, add a link to an online image, or upload an image. For more information, see Uploading assets.

Note

When you want to display an image that is in your repository, use relative links instead of absolute links.

Here are some examples for using relative links to display an image.

Context	Relative Link
In a `.md` file on the same branch	`/assets/images/electrocat.png`
In a `.md` file on another branch	`/../main/assets/images/electrocat.png`
In issues, pull requests and comments of the repository	`../blob/main/assets/images/electrocat.png?raw=true`
In a `.md` file in another repository	`/../../../../github/docs/blob/main/assets/images/electrocat.png`
In issues, pull requests and comments of another repository	`../../../github/docs/blob/main/assets/images/electrocat.png?raw=true`

Note

The last two relative links in the table above will work for images in a private repository only if the viewer has at least read access to the private repository that contains these images.

For more information, see Relative Links.

The Picture element

The <picture> HTML element is supported.

Lists

You can make an unordered list by preceding one or more lines of text with -, *, or +.

- George Washington
* John Adams
+ Thomas Jefferson

To order your list, precede each line with a number.

1. James Madison
2. James Monroe
3. John Quincy Adams

Nested Lists

You can create a nested list by indenting one or more list items below another item.

To create a nested list using the web editor on GitHub or a text editor that uses a monospaced font, like Visual Studio Code, you can align your list visually. Type space characters in front of your nested list item until the list marker character (- or *) lies directly below the first character of the text in the item above it.

1. First list item
   - First nested list item
     - Second nested list item

Note

In the web-based editor, you can indent or dedent one or more lines of text by first highlighting the desired lines and then using Tab or Shift+Tab respectively.

To create a nested list in the comment editor on GitHub, which doesn't use a monospaced font, you can look at the list item immediately above the nested list and count the number of characters that appear before the content of the item. Then type that number of space characters in front of the nested list item.

In this example, you could add a nested list item under the list item 100. First list item by indenting the nested list item a minimum of five spaces, since there are five characters (100. ) before First list item.

100. First list item
     - First nested list item

You can create multiple levels of nested lists using the same method. For example, because the first nested list item has seven characters (␣␣␣␣␣-␣) before the nested list content First nested list item, you would need to indent the second nested list item by at least two more characters (nine spaces minimum).

100. First list item
     - First nested list item
       - Second nested list item

For more examples, see the GitHub Flavored Markdown Spec.

Task lists

To create a task list, preface list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].

- [x] #739
- [ ] https://github.com/octo-org/octo-repo/issues/740
- [ ] Add delight to the experience when all tasks are complete :tada:

If a task list item description begins with a parenthesis, you'll need to escape it with \:

- [ ] \(Optional) Open a followup issue

For more information, see About tasklists.

Mentioning people and teams

You can mention a person or team on GitHub by typing @ plus their username or team name. This will trigger a notification and bring their attention to the conversation. People will also receive a notification if you edit a comment to mention their username or team name. For more information about notifications, see About notifications.

Note

A person will only be notified about a mention if the person has read access to the repository and, if the repository is owned by an organization, the person is a member of the organization.

@github/support What do you think about these updates?

When you mention a parent team, members of its child teams also receive notifications, simplifying communication with multiple groups of people. For more information, see About organization teams.

Typing an @ symbol will bring up a list of people or teams on a project. The list filters as you type, so once you find the name of the person or team you are looking for, you can use the arrow keys to select it and press either tab or enter to complete the name. For teams, enter the @organization/team-name and all members of that team will get subscribed to the conversation.

The autocomplete results are restricted to repository collaborators and any other participants on the thread.

Referencing issues and pull requests

You can bring up a list of suggested issues and pull requests within the repository by typing #. Type the issue or pull request number or title to filter the list, and then press either tab or enter to complete the highlighted result.

For more information, see Autolinked references and URLs.

Referencing external resources

If custom autolink references are configured for a repository, then references to external resources, like a JIRA issue or Zendesk ticket, convert into shortened links. To know which autolinks are available in your repository, contact someone with admin permissions to the repository. For more information, see Configuring autolinks to reference external resources.

Uploading assets

You can upload assets like images by dragging and dropping, selecting from a file browser, or pasting. You can upload assets to issues, pull requests, comments, and .md files in your repository.

Using emojis

You can add emoji to your writing by typing :EMOJICODE:, a colon followed by the name of the emoji.

@octocat :+1: This PR looks great - it's ready to merge! :shipit:

Typing : will bring up a list of suggested emoji. The list will filter as you type, so once you find the emoji you're looking for, press Tab or Enter to complete the highlighted result.

For a full list of available emoji and codes, see the Emoji-Cheat-Sheet.

Paragraphs

You can create a new paragraph by leaving a blank line between lines of text.

Footnotes

You can add footnotes to your content by using this bracket syntax:

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, add 2 spaces to the end of a line.  
This is a second line.

The footnote will render like this:

Note

The position of a footnote in your Markdown does not influence where the footnote will be rendered. You can write a footnote right after your reference to the footnote, and the footnote will still render at the bottom of the Markdown. Footnotes are not supported in wikis.

Alerts

Alerts, also sometimes known as callouts or admonitions, are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. On GitHub, they are displayed with distinctive colors and icons to indicate the significance of the content.

Use alerts only when they are crucial for user success and limit them to one or two per article to prevent overloading the reader. Additionally, you should avoid placing alerts consecutively. Alerts cannot be nested within other elements.

To add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. Five types of alerts are available:

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Here are the rendered alerts:

Hiding content with comments

You can tell GitHub to hide content from the rendered Markdown by placing the content in an HTML comment.

<!-- This content will not appear in the rendered Markdown -->

Ignoring Markdown formatting

You can tell GitHub to ignore (or escape) Markdown formatting by using \ before the Markdown character.

Let's rename \*our-new-project\* to \*our-old-project\*.

For more information on backslashes, see Daring Fireball's Markdown Syntax.

Note

The Markdown formatting will not be ignored in the title of an issue or a pull request.

Disabling Markdown rendering

When viewing a Markdown file, you can click Code at the top of the file to disable Markdown rendering and view the file's source instead.

Disabling Markdown rendering enables you to use source view features, such as line linking, which is not possible when viewing rendered Markdown files.

math

Tue, 31 Mar 2026 05:24:37 GMT

$$ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

Markdown 的目標是實現「易讀易寫」。

Sat, 28 Mar 2026 14:32:48 GMT

来源¹

不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈，並且看起來不會像是由許多標籤或是格式指令所構成。Markdown 語法受到一些既有 text-to-HTML 格式的影響，包括Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，然而最大靈感來源其實是純文字的電子郵件格式。

因此 Markdown 的語法全由標點符號所組成，並經過嚴謹慎選，是為了讓它們看起來就像所要表達的意思。像是在文字兩旁加上星號，看起來就像強調。Markdown 的清單看起來，嗯，就是清單。假如你有使用過電子郵件，區塊引言看起來就真的像是引用一段文字。

行內HTML

Markdown 的語法有個主要的目的：用來作為一種網路內容的寫作用語言。

Markdown 不是要來取代 HTML，甚至也沒有要和它相似，它的語法種類不多，只和 HTML 的一部分有關係，重點不是要創造一種更容易寫作 HTML 文件的語法，我認為 HTML 已經很容易寫了，Markdown 的重點在於，它能讓文件更容易閱讀、編寫。HTML 是一種發佈的格式，Markdown 是一種編寫的格式，因此，Markdown 的格式語法只涵蓋純文字可以涵蓋的範圍。

不在 Markdown 涵蓋範圍之外的標籤，都可以直接在文件裡面用 HTML 撰寫。不需要額外標註這是 HTML 或是 Markdown；只要直接加標籤就可以了。

来源：https://markdown.tw/ ↩

如何在Astro v6上实现动态的 OpenGraph 社交图片生成？运行在边缘计算使用wasm！支持Cloudflare workers

Sat, 28 Mar 2026 09:37:44 GMT

代码

Details

import type { APIRoute } from "astro";
// @ts-ignore
import { env } from "cloudflare:workers";
import { getLiveEntry } from "astro:content";
import { formatDate } from "@/lib/utils";

import satori, { init } from "satori/standalone";
import { initWasm, Resvg } from "@resvg/resvg-wasm";

// @ts-ignore
import yogaWasm from "satori/yoga.wasm?module";
// @ts-ignore
import resvgWasm from "@resvg/resvg-wasm/index_bg.wasm?module";

// --- 1. 在函数外部定义全局锁和缓存 ---
let wasmInitPromise: Promise<void> | null = null;
let fontCache: ArrayBuffer | null = null;

// 封装一个纯粹的初始化函数
async function initializeWasm(yogaWasm: any, resvgWasm: any) {
  // 如果已经有 Promise 在运行或已完成，直接返回它
  if (wasmInitPromise) return wasmInitPromise;

  wasmInitPromise = (async () => {
    try {
      await Promise.all([init(yogaWasm), initWasm(resvgWasm)]);
      console.log("WASM Initialized successfully");
    } catch (e: any) {
      // 如果报错内容包含 "already initialized"，说明其实已经好了，忽略它
      if (
        e.message?.includes("already initialized") ||
        e.message?.includes("used only once")
      ) {
        return;
      }
      // 如果是其他致命错误，清空锁以便下次重试
      wasmInitPromise = null;
      throw e;
    }
  })();

  return wasmInitPromise;
}

export const GET: APIRoute = async ({ params, request }) => {
  const { entry } = await getLiveEntry("data", params.id as string);
  if (!entry) return new Response("Not Found", { status: 404 });
  try {
    // --- 2. 这里的调用现在是“线程安全”的 ---
    await initializeWasm(yogaWasm, resvgWasm);

    // 字体持久化逻辑保持不变
    if (!fontCache) {
      const fontRes = await env.ASSETS.fetch(
        new URL("/fonts/MiSans-Regular.ttf", request.url),
      );
      fontCache = await fontRes.arrayBuffer();
    }

    // 3. Satori 渲染 SVG
    const svg = await satori(
      {
        type: "div",
        props: {
          style: {
            height: "100%",
            width: "100%",
            display: "flex",
            flexDirection: "column",
            backgroundColor: "#000",
            color: "#fff",
            fontFamily: "MiSans",
            border: "1px solid #222",
          },
          children: [
            // ... 你的 UI 结构保持不变
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  padding: "30px 40px",
                  borderBottom: "1px solid #222",
                  alignItems: "center",
                },
                children: [
                  {
                    type: "div",
                    props: {
                      style: {
                        border: "1px solid #444",
                        borderRadius: "8px",
                        padding: "4px 12px",
                        color: "#888",
                        fontSize: "24px",
                      },
                      children: "#" + entry.id,
                    },
                  },
                ],
              },
            },
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  flex: 1,
                  padding: "0 40px",
                  alignItems: "center",
                  justifyContent: "center",
                },
                children: {
                  type: "h1",
                  props: {
                    style: {
                      fontSize: "85px",
                      fontWeight: "300",
                      textAlign: "center",
                      lineHeight: "1.3",
                    },
                    children: entry.data.title,
                  },
                },
              },
            },
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "30px 40px",
                  borderTop: "1px solid #222",
                  color: "#666",
                },
                children: [
                  {
                    type: "span",
                    props: { children: formatDate(entry.data.createdAt) },
                  },
                  {
                    type: "span",
                    props: { children: entry.data.category.name },
                  },
                ],
              },
            },
          ],
        },
      },
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: "MiSans",
            data: fontCache,
            weight: 400,
            style: "normal",
          },
        ],
      },
    );

    // 4. Resvg 渲染 PNG
    const resvg = new Resvg(svg, {
      fitTo: { mode: "width", value: 1200 },
    });
    const pngData = resvg.render();
    const pngBuffer = pngData.asPng();

    return new Response(new Uint8Array(pngBuffer) as any, {
      headers: {
        "Content-Type": "image/png",
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    });
  } catch (e: any) {
    console.error("OG Error:", e.message);
    return new Response(`Error generating image: ${e.message}`, {
      status: 500,
    });
  }
};

如果你网站部署在提供边缘计算的服务商上，这个方案很合适。无需编译时生成图片耗费时间。

需要

@resvg/resvg-wasm
satori

这两个包被打包进workers大小在2.5mb，压缩后 1.4mb 如果你还有其他模块。可能会超过免费额度

 _astro/index_bg.Blvrv-U2.wasm                             │ compiled-wasm │ 2420.51 KiB 
_astro/yoga.sbSbVeWy.wasm                                 │ compiled-wasm │ 70.05 KiB 

Total Upload: 4498.55 KiB / gzip: 1433.02 KiB

[id].ts

我创建了 src\pages\og\[id].png.ts 文件，访问/og/1.png就可以获取图片

原理

satori

使用字体和实现布局创建svg数据

resvg

将svg数据画成PNG图片

实现与限制

Cloudflare workers不允许实时编译生成wasm。一切都要预载

satori

导入 satori 标准版无yoga

import satori, { init } from "satori/standalone";

导入Yoga wasm

// @ts-ignore
import yogaWasm from "satori/yoga.wasm?module";

Resvg

import { initWasm, Resvg } from "@resvg/resvg-wasm";

// @ts-ignore
import resvgWasm from "@resvg/resvg-wasm/index_bg.wasm?module";

初始化

// --- 1. 在函数外部定义全局锁和缓存 ---
let wasmInitPromise: Promise<void> | null = null;
let fontCache: ArrayBuffer | null = null;

// 封装一个纯粹的初始化函数
async function initializeWasm(yogaWasm: any, resvgWasm: any) {
  // 如果已经有 Promise 在运行或已完成，直接返回它
  if (wasmInitPromise) return wasmInitPromise;

  wasmInitPromise = (async () => {
    try {
      await Promise.all([init(yogaWasm), initWasm(resvgWasm)]);
      console.log("WASM Initialized successfully");
    } catch (e: any) {
      // 如果报错内容包含 "already initialized"，说明其实已经好了，忽略它
      if (
        e.message?.includes("already initialized") ||
        e.message?.includes("used only once")
      ) {
        return;
      }
      // 如果是其他致命错误，清空锁以便下次重试
      wasmInitPromise = null;
      throw e;
    }
  })();

  return wasmInitPromise;
}

字体

放在了public，并使用Workers assets方式读取
public\fonts\MiSans-Regular.ttf

API代码

使用astro api 获取GET ID后

export const GET: APIRoute = async ({ params, request }) => {
  const { entry } = await getLiveEntry("data", params.id as string);
  if (!entry) return new Response("Not Found", { status: 404 });
  try {
    // --- 2. 这里的调用现在是“线程安全”的 ---
    await initializeWasm(yogaWasm, resvgWasm);

    // 字体持久化逻辑保持不变
    if (!fontCache) {
      const fontRes = await env.ASSETS.fetch(
        new URL("/fonts/MiSans-Regular.ttf", request.url),
      );
      fontCache = await fontRes.arrayBuffer();
    }

    // 3. Satori 渲染 SVG
    const svg = await satori(
      {
        type: "div",
        props: {
          style: {
            height: "100%",
            width: "100%",
            display: "flex",
            flexDirection: "column",
            backgroundColor: "#000",
            color: "#fff",
            fontFamily: "MiSans",
            border: "1px solid #222",
          },
          children: [
            // ... 你的 UI 结构保持不变
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  padding: "30px 40px",
                  borderBottom: "1px solid #222",
                  alignItems: "center",
                },
                children: [
                  {
                    type: "div",
                    props: {
                      style: {
                        border: "1px solid #444",
                        borderRadius: "8px",
                        padding: "4px 12px",
                        color: "#888",
                        fontSize: "24px",
                      },
                      children: "#" + entry.id,
                    },
                  },
                ],
              },
            },
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  flex: 1,
                  padding: "0 40px",
                  alignItems: "center",
                  justifyContent: "center",
                },
                children: {
                  type: "h1",
                  props: {
                    style: {
                      fontSize: "85px",
                      fontWeight: "300",
                      textAlign: "center",
                      lineHeight: "1.3",
                    },
                    children: entry.data.title,
                  },
                },
              },
            },
            {
              type: "div",
              props: {
                style: {
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "30px 40px",
                  borderTop: "1px solid #222",
                  color: "#666",
                },
                children: [
                  {
                    type: "span",
                    props: { children: formatDate(entry.data.createdAt) },
                  },
                  {
                    type: "span",
                    props: { children: entry.data.category.name },
                  },
                ],
              },
            },
          ],
        },
      },
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: "MiSans",
            data: fontCache,
            weight: 400,
            style: "normal",
          },
        ],
      },
    );

    // 4. Resvg 渲染 PNG
    const resvg = new Resvg(svg, {
      fitTo: { mode: "width", value: 1200 },
    });
    const pngData = resvg.render();
    const pngBuffer = pngData.asPng();

    return new Response(new Uint8Array(pngBuffer) as any, {
      headers: {
        "Content-Type": "image/png",
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    });
  } catch (e: any) {
    console.error("OG Error:", e.message);
    return new Response(`Error generating image: ${e.message}`, {
      status: 500,
    });
  }
};

Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

Sat, 28 Mar 2026 09:02:44 GMT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.

Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.

Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.

Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

Lorem ipsum dolor sit amet

Sat, 28 Mar 2026 09:01:24 GMT

markdown-style-guide

Sat, 28 Mar 2026 09:00:20 GMT

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Syntax

![Alt text](./full/or/relative/path/of/image)

Output

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Syntax

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
> **Note** that you can use _Markdown syntax_ within a blockquote.

Output

Tiam, ad mint andaepu dandae nostion secatur sequo quae.
Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Syntax

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

Output

Don't communicate by sharing memory, share memory by communicating.

— Rob Pike¹

Tables

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

Output

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

List Types

Ordered List

Syntax

1. First item
2. Second item
3. Third item

Output

First item
Second item
Third item

Unordered List

Syntax

- List item
- Another item
- And another item

Output

List item
Another item
And another item

Nested list

Syntax

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

Syntax

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

~delete~

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

~~delete~~

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015. ↩

Recommended Setup | 推荐设置

Sat, 28 Mar 2026 08:56:19 GMT

强大好用的Github Discussions

建议你只保留带锁的分类，可以防止游客乱发内容出现在你的博客上！

Announcement 只会允许维护者或仓库所有者发起

Astro-Theme-Live_Flow - undefined

Github markdown-alert

GFM

Basic writing and formatting syntax

Headings

Styling text

Quoting text

Quoting code

Supported color models

Links

Section links

Relative links

Custom anchors

Line breaks

Images

The Picture element

Lists

Nested Lists

Task lists

Mentioning people and teams

Referencing issues and pull requests

Referencing external resources

Uploading assets

Using emojis

Paragraphs

Footnotes

Alerts

Hiding content with comments

Ignoring Markdown formatting

Disabling Markdown rendering

Further reading

math

Markdown 的目標是實現「易讀易寫」。

行內HTML

Footnotes

如何在Astro v6上实现 动态的 OpenGraph 社交图片生成？运行在边缘计算 使用wasm！支持Cloudflare workers

代码

需要

[id].ts

原理

satori

resvg

实现与限制

satori

Resvg

初始化

字体

API代码

Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

Lorem ipsum dolor sit amet

markdown-style-guide

H1

H2

H3

H4

H5

H6

Paragraph

Images

Syntax

Output

Blockquotes

Blockquote without attribution

Syntax

Output

Blockquote with attribution

Syntax

Output

Tables

Syntax

Output

Code Blocks

Syntax

Output

List Types

Ordered List

Syntax

Output

Unordered List

Syntax

如何在Astro v6上实现动态的 OpenGraph 社交图片生成？运行在边缘计算使用wasm！支持Cloudflare workers