diff --git a/src/content/posts/Markdown Style Guide-en.md b/src/content/posts/Markdown Style Guide-en.md index 402d03d..d7608d0 100644 --- a/src/content/posts/Markdown Style Guide-en.md +++ b/src/content/posts/Markdown Style Guide-en.md @@ -1,14 +1,14 @@ --- title: Markdown Style Guide published: 2025-03-08 -updated: 2025-03-20 +updated: 2025-03-23 tags: ["Guide"] pin: 1 lang: en abbrlink: markdown-style-guide --- -Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. +Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Retypeset. ## Headings @@ -42,7 +42,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap ### Output -![Image Placeholder](/blog-placeholder.jpg) +![Image Placeholder](/image-placeholder.jpg) ## Blockquotes @@ -53,13 +53,13 @@ The blockquote element represents content that is quoted from another source, op #### Syntax ```markdown -> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> 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. +> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote. ### Blockquote with attribution @@ -197,12 +197,12 @@ H2O Xn + Yn = Zn -GIF is a bitmap image format (hover for 2s). +GIF is a bitmap image format. + +Good writers always check for speling mistakes. Press CTRL + ALT + Delete to end the session. -Students often make some speling mistakes (hover for 2s). - There is nothing no code either good or bad, but running it makes it so. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. @@ -216,7 +216,7 @@ Xn + Yn = Zn GIF is a bitmap image format. -Students often make some speling mistakes. +Good writers always check for speling mistakes. Press CTRL + ALT + Delete to end the session. diff --git a/src/content/posts/Markdown Style Guide-zh.md b/src/content/posts/Markdown Style Guide-zh.md new file mode 100644 index 0000000..2303e1c --- /dev/null +++ b/src/content/posts/Markdown Style Guide-zh.md @@ -0,0 +1,242 @@ +--- +title: Markdown 样式指南 +published: 2025-03-08 +updated: 2025-03-23 +tags: ["指南"] +pin: 1 +lang: zh +abbrlink: markdown-style-guide +--- + +本文是在 Retypeset 中编写 Markdown 内容时可用的一些基础语法示例。 + +## 标题 + +HTML 的 `

` 至 `

` 元素对应六级标题。`

` 为最高级标题，`

` 为最低级。 + +# 一级标题 + +## 二级标题 + +### 三级标题 + +#### 四级标题 + +##### 五级标题 + +###### 六级标题 + +## 段落 + +孔乙己是站着喝酒而穿长衫的唯一的人。他身材很高大；青白脸色，皱纹间时常夹些伤痕；一部乱蓬蓬的花白的胡子。穿的虽然是长衫，可是又脏又破，似乎十多年没有补，也没有洗。他对人说话，总是满口之乎者也，教人半懂不懂的。因为他姓孔，别人便从描红纸上的“上大人孔乙己”这半懂不懂的话里，替他取下一个绰号，叫作孔乙己。孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道：“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说：“温两碗酒，要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道：“你一定又偷了人家的东西了！”孔乙己睁大眼睛说：“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道：“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。 + +听人家背地里谈论，孔乙己原来也读过书，但终于没有进学，又不会营生；于是愈过愈穷，弄到将要讨饭了。 + +## 图片 + +### 语法 + +```markdown +![图片描述](./full/or/relative/path/of/image) +``` + +### 效果 + +![图片占位符](/image-placeholder.jpg) + +## 块引用 + +块引用用于标注外部来源内容，内部可使用 Markdown 语法。若需添加来源注释，应通过 footer 或 cite 元素实现。 + +### 无来源注释 + +#### 语法 + +```markdown +> 天地不仁，以万物为刍狗。 +> +> **注意**：引用块内可使用 _Markdown 语法_。 +``` + +#### 效果 + +> 天地不仁，以万物为刍狗。 +> +> **注意**：引用块内可使用 _Markdown 语法_。 + +### 带来源注释 + +#### 语法 + +```markdown +> 其实地上本没有路，走的人多了，也便成了路。 +> +> — 《故乡》鲁迅[^1] +``` + +#### 效果 + +> 其实地上本没有路，走的人多了，也便成了路。 +> +> — 《故乡》鲁迅[^1] + +[^1]: 摘自鲁迅在 1921 年 1 月发表的[《故乡》](https://zh.wikisource.org/wiki/%E6%95%85%E9%84%89)。 + +## 表格 + +### 语法 + +```markdown +| 斜体 | 粗体 | 代码 | +| ------ | -------- | ------ | +| _斜体_ | **粗体** | `代码` | +``` + +### 效果 + +| 斜体 | 粗体 | 代码 | +| ------ | -------- | ------ | +| _斜体_ | **粗体** | `代码` | + +## 代码块 + +### 语法 + +在代码的开头和结尾处，使用三个反引号 ``` 包裹代码，并在开头的反引号后标注 html、javascript、css 等语言类型，以实现不同的语法高亮效果。 + +````markdown +```html + + + + + HTML5 示例文档 + + +

测试

+ + +``` +```` + +### 效果 + +```html + + + + + HTML5 示例文档 + + +

测试

+ + +``` + +## 列表 + +### 有序列表 + +#### 语法 + +```markdown +1. 第一项 +2. 第二项 +3. 第三项 +``` + +#### 效果 + +1. 第一项 +2. 第二项 +3. 第三项 + +### 无序列表 + +#### 语法 + +```markdown +- 列表项 +- 另一项 +- 更多项 +``` + +#### 效果 + +- 列表项 +- 另一项 +- 更多项 + +### 嵌套列表 + +#### 语法 + +```markdown +- 水果 + - 苹果 + - 橙子 + - 香蕉 +- 蔬菜 + - 青菜 + - 萝卜 +``` + +#### 效果 + +- 水果 + - 苹果 + - 橙子 + - 香蕉 +- 蔬菜 + - 青菜 + - 萝卜 + +## 其他元素 + +### 语法 + +```markdown +H2O + +Xn + Yn = Zn + +GIF 是一种位图图像格式。 + +书籍是人类进步的楼梯阶梯。 + +优秀的作者总是会仔细检查拚写错误。 + +按下 Ctrl + Alt + Delete 以结束会话。 + +大多数蝾螈昼伏夜出，以昆虫、蠕虫等小生物为食。 +``` + +### 效果 + +H2O + +Xn + Yn = Zn + +GIF 是一种位图图像格式。 + +书籍是人类进步的楼梯阶梯。 + +优秀的作者总是会仔细检查拚写错误。 + +按下 Ctrl + Alt + Delete 以结束会话。 + +大多数蝾螈昼伏夜出，以昆虫、蠕虫等小生物为食。 + + +``` diff --git a/src/styles/heti.css b/src/styles/heti.css index 34024ea..efc84a6 100644 --- a/src/styles/heti.css +++ b/src/styles/heti.css @@ -208,6 +208,34 @@ html.dark .heti mark { } /* Footnotes */ +.footnotes > h2, +.footnotes > h3 { + display: none; +} +.footnotes:lang(zh-CN)::before { + content: "脚注"; + --at-apply: 'block text-xl font-semibold mb-4'; +} +.footnotes:lang(zh-TW)::before { + content: "腳註"; + --at-apply: 'block text-xl font-semibold mb-4'; +} +.footnotes:lang(ja-JP)::before { + content: "脚注"; + --at-apply: 'block text-xl font-semibold mb-4'; +} +.footnotes:lang(en-US)::before { + content: "Footnotes"; + --at-apply: 'block text-xl font-semibold mb-4'; +} +.footnotes:lang(es-ES)::before { + content: "Notas al pie"; + --at-apply: 'block text-xl font-semibold mb-4'; +} +.footnotes:lang(ru-RU)::before { + content: "Сноски"; + --at-apply: 'block text-xl font-semibold mb-4'; +} .heti .data-footnote-backref { --at-apply: 'no-underline'; } @@ -225,11 +253,7 @@ html.dark .heti mark { /* Emphasized */ .heti em { - --at-apply: 'not-italic font-semibold'; -} -.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)), -.heti em:not(:lang(zh)) { - --at-apply: 'italic font-normal'; + --at-apply: 'italic'; } /* Quotes */