test: md style preview

2025-06-15 11:12:54 +02:00 · 2025-03-23 14:33:11 +00:00 · 2025-03-23 14:33:11 +00:00 · 29882c8581
commit 29882c8581
parent f5e8e88dce
4 changed files with 91 additions and 90 deletions
--- a/astro.config.ts
+++ b/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: [
--- a/package.json
+++ b/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",
--- a/src/content/posts/Markdown
+++ b/src/content/posts/Markdown
@ -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
--- a/src/styles/heti.css
+++ b/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: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/60) ';
+  --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/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 {
-  --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
+/* 引用 */
+.heti blockquote {
+  --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 {
-  --at-apply: 'bg-#4d4a00e0';
+.heti blockquote blockquote {
+  --at-apply: 'my-3';
+}
+.heti blockquote p {
+  --at-apply: 'my-2';
 }

-/* 键盘输入文本 */
-.heti kbd {
-  --at-apply: 'bg-secondary/5 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 pre {
+  --at-apply: 'my-3 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/7';
+  --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 sup {
-  --at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
+/* 代码 */
+.heti code {
+  --at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/7';
 }
-.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 hr {
+  --at-apply: 'border-secondary/25';
 }

 /* 列表 */
@ -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;
-  margin-inline-end: 1px;
+  --at-apply: 'mx-0.25';
 }