TQL syntax highlighting in docs site (#4524)

This PR adds support for syntax highlighting of TQL code blocks in the docs site. To review, add a TQL code block in any docs or blog page, and run docusaurus. Missing feature: copy to clipboard button, see upstream issue - rehype-pretty/rehype-pretty-code#235. Closes tenzir/issues#2035.
tenzir · Oct 10, 2024 · dac322d · dac322d
2 parents 982276b + 8194f54
commit dac322d
Show file tree

Hide file tree

Showing 5 changed files with 416 additions and 10 deletions.
diff --git a/.github/workflows/tenzir.yaml b/.github/workflows/tenzir.yaml
@@ -441,7 +441,7 @@ jobs:
           cp -f CHANGELOG.md web/src/pages/changelog.md
       - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache-dependency-path: web/yarn.lock
           cache: yarn
       - name: Install dependencies

diff --git a/web/docusaurus.config.js b/web/docusaurus.config.js
@@ -1,11 +1,24 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
 const path = require('node:path');
 
+const tqlGrammar = require("@tenzir/vscode-tql/syntaxes/tql.tmLanguage.json");
+
 async function createConfig() {
+  const rehypePrettyCode = (await import('rehype-pretty-code')).default;
+  const shikiHighlighter = (await import('shiki')).createHighlighter;
+
+  const rehypePrettyCodeOptions = {
+    keepBackground: false,
+    theme: "github-dark-default",
+    getHighlighter: (options) =>
+      shikiHighlighter({
+        ...options,
+        langs: [() => tqlGrammar],
+      }),
+  };
+
   /// BEGIN CUSTOM CODE ///
 
   // This is customized version of
@@ -117,6 +130,7 @@ async function createConfig() {
             showLastUpdateTime: false,
             showLastUpdateAuthor: false,
             beforeDefaultRemarkPlugins: [[inlineSVG, {suffix: '.svg'}]],
+            rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
           },
           blog: {
             blogTitle: 'Blog',
@@ -125,6 +139,7 @@ async function createConfig() {
             blogSidebarTitle: 'Blog Posts',
             postsPerPage: 20,
             beforeDefaultRemarkPlugins: [[inlineSVG, {suffix: '.svg'}]],
+            rehypePlugins: [[rehypePrettyCode, rehypePrettyCodeOptions]],
           },
           pages: {
             beforeDefaultRemarkPlugins: [[inlineSVG, {suffix: '.svg'}]],
@@ -294,11 +309,6 @@ async function createConfig() {
           ],
           copyright: `Copyright © ${new Date().getFullYear()} Tenzir GmbH.`,
         },
-        prism: {
-          theme: lightCodeTheme,
-          darkTheme: darkCodeTheme,
-          additionalLanguages: ['r'],
-        },
       }),
 
     // This replaces Docusaurus' default babel loader with esbuild

diff --git a/web/package.json b/web/package.json
@@ -22,17 +22,19 @@
     "@docusaurus/theme-mermaid": "^2.4.1",
     "@giscus/react": "^2.3.0",
     "@mdx-js/react": "^1.6.22",
+    "@tenzir/vscode-tql": "^0.0.3",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.3",
-    "prism-react-renderer": "^1.3.5",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-svg": "^16.1.1",
     "redocusaurus": "^1.4.0",
+    "rehype-pretty-code": "^0.14.0",
     "remark": "^14.0.2",
     "remark-inline-svg": "^1.1.0",
     "sass": "^1.58.0",
+    "shiki": "^1.18.0",
     "strip-markdown": "^5.0.0"
   },
   "devDependencies": {

diff --git a/web/src/css/custom.scss b/web/src/css/custom.scss
@@ -152,3 +152,24 @@ code, pre {
 		url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.345,6.236c-0.218-0.606-0.438-1.217-0.442-1.225c-0.105-0.235-0.348-0.383-0.604-0.357	c-0.162,0.013-3.995,0.343-6.451,2.318C3.564,8.158,1,15.092,1,21.087c0,0.106,0.027,0.209,0.08,0.301	c1.771,3.11,6.599,3.924,7.699,3.959c0.007,0.001,0.013,0.001,0.019,0.001c0.194,0,0.376-0.093,0.492-0.25l1.19-1.612	c-1.966-0.299-2.321-0.689-2.404-0.75c-0.444-0.327-0.772-0.785-0.374-1.363c0.306-0.449,0.948-0.597,1.44-0.344	C9.646,21.264,10.995,22.02,15,22c3.977-0.012,5.723-0.845,5.748-0.863c0.668-0.301,1.189-0.177,1.514,0.269	c0.387,0.607,0.111,1.018-0.331,1.344c-0.083,0.061-0.284,0.232-2.396,0.732l1.175,1.615c0.115,0.158,0.298,0.25,0.492,0.25	c0.007,0,0.013,0,0.019-0.001c1.101-0.035,5.929-0.849,7.699-3.959c0.053-0.092,0.08-0.195,0.08-0.301	c0-5.994-2.564-12.928-3.88-14.14c-2.424-1.948-6.257-2.278-6.419-2.292c-0.256-0.022-0.499,0.123-0.604,0.357	c-0.004,0.008-0.218,0.629-0.425,1.228C17.672,6.239,16.041,6,15,6S12.345,6.236,12.345,6.236z M11,19c-1.105,0-2-1.333-2-2.979	s0.895-2.979,2-2.979c1.109-0.165,1.976,1.333,2,2.979C13,17.667,12.105,19,11,19z M19,19c-1.105,0-2-1.342-2-2.997	s0.895-2.997,2-2.997s2,1.342,2,2.997S20.105,19,19,19z'/%3E%3C/svg%3E%0A"),
 		url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.345,6.236c-0.218-0.606-0.438-1.217-0.442-1.225c-0.105-0.235-0.348-0.383-0.604-0.357	c-0.162,0.013-3.995,0.343-6.451,2.318C3.564,8.158,1,15.092,1,21.087c0,0.106,0.027,0.209,0.08,0.301	c1.771,3.11,6.599,3.924,7.699,3.959c0.007,0.001,0.013,0.001,0.019,0.001c0.194,0,0.376-0.093,0.492-0.25l1.19-1.612	c-1.966-0.299-2.321-0.689-2.404-0.75c-0.444-0.327-0.772-0.785-0.374-1.363c0.306-0.449,0.948-0.597,1.44-0.344	C9.646,21.264,10.995,22.02,15,22c3.977-0.012,5.723-0.845,5.748-0.863c0.668-0.301,1.189-0.177,1.514,0.269	c0.387,0.607,0.111,1.018-0.331,1.344c-0.083,0.061-0.284,0.232-2.396,0.732l1.175,1.615c0.115,0.158,0.298,0.25,0.492,0.25	c0.007,0,0.013,0,0.019-0.001c1.101-0.035,5.929-0.849,7.699-3.959c0.053-0.092,0.08-0.195,0.08-0.301	c0-5.994-2.564-12.928-3.88-14.14c-2.424-1.948-6.257-2.278-6.419-2.292c-0.256-0.022-0.499,0.123-0.604,0.357	c-0.004,0.008-0.218,0.629-0.425,1.228C17.672,6.239,16.041,6,15,6S12.345,6.236,12.345,6.236z M11,19c-1.105,0-2-1.333-2-2.979	s0.895-2.979,2-2.979c1.109-0.165,1.976,1.333,2,2.979C13,17.667,12.105,19,11,19z M19,19c-1.105,0-2-1.342-2-2.997	s0.895-2.997,2-2.997s2,1.342,2,2.997S20.105,19,19,19z'/%3E%3C/svg%3E%0A")
 	);
+
+figure[data-rehype-pretty-code-figure] {
+  margin: 0;
+}
+
+figure[data-rehype-pretty-code-figure]:has(figcaption) pre {
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
+
+figure[data-rehype-pretty-code-figure]
+  figcaption[data-rehype-pretty-code-title] {
+  font-family: var(--ifm-font-family-monospace);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  background-color: hsl(229, 20%, 30%);
+  padding: 0.25rem 1rem;
+  font-weight: 500;
+  color: hsl(229, 20%, 90%);
+  border-radius: 0.5rem 0.5rem 0 0;
+}