From 83e22e7e592af9ddeede67d159318040adaa11ad Mon Sep 17 00:00:00 2001 From: saicaca Date: Sun, 12 Nov 2023 19:35:53 +0800 Subject: [PATCH] feat: add heading anchor links --- astro.config.mjs | 13 +++++++- package.json | 2 ++ pnpm-lock.yaml | 51 ++++++++++++++++++++++++++---- src/components/misc/Markdown.astro | 14 ++++++++ 4 files changed, 73 insertions(+), 7 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index f1b1c16..9192294 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -9,6 +9,8 @@ import rehypeKatex from "rehype-katex"; import Color from 'colorjs.io'; import remarkMath from "remark-math"; +import rehypeAutolinkHeadings from "rehype-autolink-headings"; +import rehypeSlug from "rehype-slug"; // https://astro.build/config @@ -37,7 +39,16 @@ export default defineConfig({ ], markdown: { remarkPlugins: [remarkMath, remarkReadingTime], - rehypePlugins: [rehypeKatex] + rehypePlugins: [rehypeKatex, rehypeSlug, + [rehypeAutolinkHeadings, { + behavior: 'append', + properties: {className: ['anchor']}, + content: { + type: 'element', + tagName: 'span', + properties: {className: ['anchor-icon']}, + children: [{type: 'text', value: '#'}] + }}]] }, redirects: { '/': '/page/1', diff --git a/package.json b/package.json index 55e3699..8bbeda6 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ "mdast-util-to-string": "^4.0.0", "overlayscrollbars": "^2.4.4", "reading-time": "^1.5.0", + "rehype-autolink-headings": "^7.1.0", "rehype-katex": "^7.0.0", + "rehype-slug": "^6.0.0", "remark-math": "^6.0.0", "sharp": "^0.32.6", "tailwindcss": "^3.3.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index beb98fb..754db21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,15 @@ dependencies: reading-time: specifier: ^1.5.0 version: 1.5.0 + rehype-autolink-headings: + specifier: ^7.1.0 + version: 7.1.0 rehype-katex: specifier: ^7.0.0 version: 7.0.0 + rehype-slug: + specifier: ^6.0.0 + version: 6.0.0 remark-math: specifier: ^6.0.0 version: 6.0.0 @@ -3082,7 +3088,7 @@ packages: /hast-util-from-parse5@8.0.1: resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} dependencies: - '@types/hast': 3.0.1 + '@types/hast': 3.0.3 '@types/unist': 3.0.0 devlop: 1.1.0 hastscript: 8.0.0 @@ -3092,10 +3098,16 @@ packages: web-namespaces: 2.0.1 dev: false + /hast-util-heading-rank@3.0.0: + resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + dependencies: + '@types/hast': 3.0.3 + dev: false + /hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} dependencies: - '@types/hast': 3.0.1 + '@types/hast': 3.0.3 dev: false /hast-util-parse-selector@3.1.1: @@ -3107,7 +3119,7 @@ packages: /hast-util-parse-selector@4.0.0: resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} dependencies: - '@types/hast': 3.0.1 + '@types/hast': 3.0.3 dev: false /hast-util-raw@7.2.3: @@ -3200,6 +3212,12 @@ packages: zwitch: 2.0.4 dev: false + /hast-util-to-string@3.0.0: + resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==} + dependencies: + '@types/hast': 3.0.3 + dev: false + /hast-util-to-text@4.0.0: resolution: {integrity: sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==} dependencies: @@ -3232,7 +3250,7 @@ packages: /hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} dependencies: - '@types/hast': 3.0.1 + '@types/hast': 3.0.3 comma-separated-tokens: 2.0.3 hast-util-parse-selector: 4.0.0 property-information: 6.3.0 @@ -4989,6 +5007,17 @@ packages: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} dev: false + /rehype-autolink-headings@7.1.0: + resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} + dependencies: + '@types/hast': 3.0.3 + '@ungap/structured-clone': 1.2.0 + hast-util-heading-rank: 3.0.0 + hast-util-is-element: 3.0.0 + unified: 11.0.3 + unist-util-visit: 5.0.0 + dev: false + /rehype-katex@7.0.0: resolution: {integrity: sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==} dependencies: @@ -5018,6 +5047,16 @@ packages: unified: 10.1.2 dev: false + /rehype-slug@6.0.0: + resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} + dependencies: + '@types/hast': 3.0.3 + github-slugger: 2.0.0 + hast-util-heading-rank: 3.0.0 + hast-util-to-string: 3.0.0 + unist-util-visit: 5.0.0 + dev: false + /rehype-stringify@9.0.4: resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==} dependencies: @@ -5851,7 +5890,7 @@ packages: /unist-util-visit@5.0.0: resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 unist-util-is: 6.0.0 unist-util-visit-parents: 6.0.1 dev: false @@ -5918,7 +5957,7 @@ packages: /vfile-location@5.0.2: resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 vfile: 6.0.1 dev: false diff --git a/src/components/misc/Markdown.astro b/src/components/misc/Markdown.astro index f8f7f85..b538987 100644 --- a/src/components/misc/Markdown.astro +++ b/src/components/misc/Markdown.astro @@ -13,6 +13,20 @@ const className = Astro.props.class;