test: md style preview

astro.config.ts

@@ -7,7 +7,6 @@ import { defineConfig } from 'astro/config'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
-import remarkSectionize from 'remark-sectionize'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
@@ -54,7 +53,6 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       remarkMath,
-      remarkSectionize,
       remarkReadingTime,
     ],
     rehypePlugins: [

package.json

@@ -46,7 +46,6 @@
     "lint-staged": "^15.5.0",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "remark-sectionize": "^2.1.0",
     "sharp": "^0.33.5",
     "typescript": "~5.8.2",
     "unocss": "66.1.0-beta.6",

src/content/posts/Markdown Style Guide-en.md

@@ -42,7 +42,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 ### Output
 
-![blog placeholder](/blog-placeholder-about.jpg)
+![Alt text](./full/or/relative/path/of/image)
 
 ## 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.<br>
 > **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.<br>
 > **Note** that you can use _Markdown syntax_ within a blockquote.
 
 ### Blockquote with attribution

src/styles/heti.css

@@ -19,8 +19,8 @@
 
 /* 链接 */
 .heti a {
-  --at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
+  --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
-  --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/60) ';
+  --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
 }
 
 /* 段落 */
@@ -32,40 +32,6 @@
   --at-apply: 'text-start';
 }
 
-/* 引用 */
-.heti blockquote {
-  --at-apply: 'mt-3 mb-6 px-4 py-3';
-  --at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
-}
-.heti blockquote blockquote {
-  --at-apply: 'my-3';
-}
-.heti blockquote p {
-  --at-apply: 'my-2';
-}
-
-/* 代码块 */
-.heti pre {
-  --at-apply: 'my-3 px-4 py-3 rounded bg-secondary/5!';
-  --at-apply: 'overflow-auto whitespace-pre scrollbar-hidden';
-}
-.heti pre code {
-  --at-apply: 'p-0 bg-secondary/0 tracking-0';
-}
-html.dark .heti pre span {
-  --at-apply: 'text-[var(--shiki-dark)]!';
-}
-
-/* 代码 */
-.heti code {
-  --at-apply: 'px-1 py-0.5 bg-secondary/5 rounded text-0.875em';
-}
-
-/* 分割线 */
-.heti hr {
-  --at-apply: 'border-secondary/25';
-}
-
 /* 标题 */
 .heti h1,
 .heti h2,
@@ -76,7 +42,7 @@ html.dark .heti pre span {
   --at-apply: 'mt-6 mb-3 font-semibold';
 }
 .heti h1 {
-  --at-apply: 'mb-6 text-8 leading-12';
+  --at-apply: 'text-8 leading-12';
 }
 .heti h2 {
   --at-apply: 'text-6 leading-9';
@@ -114,42 +80,38 @@ html.dark .heti pre span {
   --at-apply: 'mt-3';
 }
 
-/* 高亮 */
+/* 引用 */
-.heti mark {
+.heti blockquote {
-  --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
+  --at-apply: 'mt-3 mb-6 px-4 py-3 rounded';
+  --at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
 }
-html.dark .heti mark {
+.heti blockquote blockquote {
-  --at-apply: 'bg-#4d4a00e0';
+  --at-apply: 'my-3';
+}
+.heti blockquote p {
+  --at-apply: 'my-2';
 }
 
-/* 键盘输入文本 */
+/* 代码块 */
-.heti kbd {
+.heti pre {
-  --at-apply: 'bg-secondary/5 rounded border border-solid border-secondary/40 text-secondary';
+  --at-apply: 'my-3 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/7';
-  --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
+  --at-apply: 'overflow-auto whitespace-pre scrollbar-hidden';
+}
+.heti pre code {
+  --at-apply: 'p-0 bg-secondary/0 tracking-0 border-none';
+}
+html.dark .heti pre span {
+  --at-apply: 'text-[var(--shiki-dark)]!';
 }
 
-/* 上标和下标 */
+/* 代码 */
-.heti sub,
+.heti code {
-.heti sup {
+  --at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/7';
-  --at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
 }
-.heti sub {
+
-  --at-apply: 'bottom--0.25em';
+/* 分割线 */
-}
+.heti hr {
-.heti sup {
+  --at-apply: 'border-secondary/25';
-  --at-apply: 'top--0.5em';
-}
-.heti sub a,
-.heti sup a {
-  --at-apply: 'no-underline';
-}
-.heti sup:target,
-.heti sup a:target {
-  --at-apply: 'bg-#ff0';
-}
-html.dark .heti sup:target,
-html.dark .heti sup a:target {
-  --at-apply: 'bg-#4d4a00e0';
 }
 
 /* 列表 */
@@ -190,7 +152,62 @@ html.dark .heti sup a:target {
 
 /* 表格 */
 .heti table {
-  --at-apply: 'box-border table-fixed mt-3 mb-6 border-collapse border border-solid border-secondary/25 break-words';
+  --at-apply: 'box-border table-fixed mt-3 mb-6 rounded-md border border-solid border-secondary/40 border-collapse break-words';
+}
+.heti th,
+.heti td {
+  --at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
+}
+
+/* 缩写 */
+.heti abbr {
+  --at-apply: 'tracking-0';
+}
+.heti abbr[title] {
+  --at-apply: 'mx-0.25 pb-0.25 border-dotted border-secondary border-b-1 no-underline cursor-help';
+}
+
+/* 上标和下标 */
+.heti sub,
+.heti sup {
+  --at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
+}
+.heti sub {
+  --at-apply: 'bottom--0.25em';
+}
+.heti sup {
+  --at-apply: 'top--0.5em';
+}
+.heti sub a,
+.heti sup a {
+  --at-apply: 'no-underline';
+}
+.heti sup:target,
+.heti sup a:target {
+  --at-apply: 'bg-#ff0';
+}
+html.dark .heti sup:target,
+html.dark .heti sup a:target {
+  --at-apply: 'bg-#4d4a00e0';
+}
+
+/* 键盘输入文本 */
+.heti kbd {
+  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
+  --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
+}
+
+/* 高亮 */
+.heti mark {
+  --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
+}
+html.dark .heti mark {
+  --at-apply: 'bg-#4d4a00e0';
+}
+
+/* 脚注 */
+.heti .data-footnote-backref {
+  --at-apply: 'no-underline';
 }
 
 .heti figure {
@@ -203,13 +220,7 @@ html.dark .heti sup a:target {
   margin-inline-end: auto;
 }
 
-.heti abbr {
+
-  letter-spacing: normal;
-}
-.heti th,
-.heti td {
-  --at-apply: 'px-2 py-1.5 border border-solid border-secondary/25';
-}
 .heti caption {
   caption-side: bottom;
   margin-block-start: 2px;
@@ -217,12 +228,7 @@ html.dark .heti sup a:target {
   font-size: 14px;
   line-height: 24px;
 }
-.heti abbr[title] {
+
-  padding-block-end: 1px;
-  border-block-end: 1px dotted;
-  text-decoration: none;
-  cursor: help;
-}
 .heti b,
 .heti strong {
   font-weight: 600;
@@ -293,10 +299,8 @@ html.dark .heti sup a:target {
 .heti em:not(:lang(zh)) {
   font-style: italic;
 }
-.heti abbr[title],
 .heti del,
 .heti s,
 .heti u {
-  margin-inline-start: 1px;
+  --at-apply: 'mx-0.25';
-  margin-inline-end: 1px;
 }