diff --git a/assets/styles.css b/assets/styles.css index 924d08ae..062ebe2a 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -39,3 +39,12 @@ body::-webkit-scrollbar-track { border-radius: 3px; background: var(--scrollbar-color); } + +/* Style the Markdown heading links. */ +.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a { + color: var(--sl-color-white); + text-decoration: none; + &:hover { + text-decoration: underline; + } +} diff --git a/astro.config.js b/astro.config.js index 33eefa95..e4543b3f 100644 --- a/astro.config.js +++ b/astro.config.js @@ -1,5 +1,7 @@ +import { rehypeHeadingIds } from "@astrojs/markdown-remark" import starlight from "@astrojs/starlight" import { defineConfig } from "astro/config" +import rehypeAutolinkHeadings from "rehype-autolink-headings" // https://astro.build/config export default defineConfig({ @@ -98,4 +100,16 @@ export default defineConfig({ ], }), ], + markdown: { + rehypePlugins: [ + rehypeHeadingIds, + [ + rehypeAutolinkHeadings, + { + // Wrap the heading text in a link. + behavior: "wrap", + }, + ], + ], + }, }) diff --git a/package.json b/package.json index 627c43d4..ba9a22bd 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "test": "npm run lint" }, "devDependencies": { + "@astrojs/markdown-remark": "^4.3.2", "@apidevtools/json-schema-ref-parser": "^11.5.4", "@astrojs/starlight": "^0.21.2", "@trivago/prettier-plugin-sort-imports": "^4.3.0", @@ -30,6 +31,7 @@ "js-yaml": "^4.1.0", "prettier": "^3.2.5", "prettier-plugin-astro": "^0.13.0", + "rehype-autolink-headings": "^7.1.0", "typeface-hk-grotesk": "^1.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20fe15df..ed07794a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@apidevtools/json-schema-ref-parser': specifier: ^11.5.4 version: 11.5.4 + '@astrojs/markdown-remark': + specifier: ^4.3.2 + version: 4.3.2 '@astrojs/starlight': specifier: ^0.21.2 version: 0.21.2(astro@4.5.10) @@ -47,6 +50,9 @@ importers: prettier-plugin-astro: specifier: ^0.13.0 version: 0.13.0 + rehype-autolink-headings: + specifier: ^7.1.0 + version: 7.1.0 typeface-hk-grotesk: specifier: ^1.0.0 version: 1.0.0 @@ -2823,6 +2829,12 @@ packages: '@types/hast': 3.0.4 dev: true + /hast-util-heading-rank@3.0.0: + resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + dependencies: + '@types/hast': 3.0.4 + dev: true + /hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} dependencies: @@ -4478,6 +4490,17 @@ packages: picomatch: 2.3.1 dev: true + /rehype-autolink-headings@7.1.0: + resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==} + dependencies: + '@types/hast': 3.0.4 + '@ungap/structured-clone': 1.2.0 + hast-util-heading-rank: 3.0.0 + hast-util-is-element: 3.0.0 + unified: 11.0.4 + unist-util-visit: 5.0.0 + dev: true + /rehype-parse@9.0.0: resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==} dependencies: