fix styling issue

lib/faq.ts

@@ -13,6 +13,79 @@ import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
 import rehypeStringify from 'rehype-stringify'
 import rehypeHighlight from 'rehype-highlight'
 
+// Not direct dependencies, use with caution
+import type { Plugin, Transformer } from 'unified'
+import type { Root, Element } from 'hast'
+import { common } from 'lowlight'
+import HighlightJs from 'highlight.js/lib/core'
+import {visit} from 'unist-util-visit'
+
+/* Turn `js` into `JavaScript`, etc */
+function getFormattedLanguageName(name: string): string | undefined {
+  return common[name]?.(HighlightJs.newInstance())['name'];
+}
+
+/**
+ * On code blocks like ```js, put the language name in a "rel" attribute on the <pre>
+ * 
+ * Reference:
+ * - https://github.com/rehypejs/rehype-highlight/blob/8fbc0ebd3a0c488e7f024ef5af6983c4b49686d1/lib/index.js
+ * - https://github.com/highlightjs/highlight.js/blob/6a52185d9b855130b5acaccef143a7bd602e7885/src/languages/cpp.js#L554
+ */
+export const annotateProgrammingLanguageName: Plugin<any[], Root, Root> = () => async (root, file) => {
+  /* Determines the language used based on the CSS class */
+  const getLanguageFromCssClass = (node: Element): string | undefined => {
+    const classes = node.properties?.className;
+    if (!Array.isArray(classes)) return;
+
+    let name: string | undefined;
+
+    for(let clazz of classes) {
+      const value = String(clazz)
+
+      if (value === 'no-highlight' || value === 'nohighlight') {
+        return undefined;
+      }
+
+      if (!name && value.slice(0, 5) === 'lang-') {
+        name = value.slice(5)
+      }
+
+      if (!name && value.slice(0, 9) === 'language-') {
+        name = value.slice(9)
+      }
+    }
+
+    return name;
+  };
+
+  /* Recursively visits all the nodes by some criteria, much cleaner. */
+  visit(root, 'element', (node, _, parent) => {
+    // Must be a specific arrangement of <pre> > <code> nodes
+    if (
+      node.tagName !== 'code' ||
+      !parent ||
+      parent.type !== 'element' ||
+      parent.tagName !== 'pre'
+    ) {
+      return;
+    }
+
+    // Must be able to determine the language
+    const lang = getLanguageFromCssClass(node);
+    if (!lang) return;
+
+    // Get the formatted name (fallback to codename) and write the "rel" attribute
+    const formattedLang = getFormattedLanguageName(lang) ?? lang;
+    parent.properties = {
+      ...(parent.properties ?? {}),
+      'rel': formattedLang,
+    };
+  });
+
+  return;
+}
+
 const postsDirectory = join(process.cwd(), '_posts')
 
 export interface FaqPostData {
@@ -67,6 +140,7 @@ export async function markdownToHtml(markdown: string) {
   const result = await remark()
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
+    .use(annotateProgrammingLanguageName)
     .use(rehypeHighlight)
     .use(rehypeSanitize, {
       ...defaultSchema,
@@ -85,6 +159,10 @@ export async function markdownToHtml(markdown: string) {
           // List of all allowed languages:
           ['className', 'hljs', 'language-*', 'language-js', 'language-css', 'language-md', 'language-python']
         ],
+        pre: [
+          ...(defaultSchema.attributes?.['pre'] ?? []),
+          'rel',
+        ],
         span: [
           ...(defaultSchema.attributes?.['code'] ?? []),
           ['className', 'hljs-addition', 'hljs-attr', 'hljs-attribute', 'hljs-built_in', 'hljs-bullet', 'hljs-char', 'hljs-code', 'hljs-comment', 'hljs-deletion', 'hljs-doctag', 'hljs-emphasis', 'hljs-formula', 'hljs-keyword', 'hljs-link', 'hljs-literal', 'hljs-meta', 'hljs-name', 'hljs-number', 'hljs-operator', 'hljs-params', 'hljs-property', 'hljs-punctuation', 'hljs-quote', 'hljs-regexp', 'hljs-section', 'hljs-selector-attr', 'hljs-selector-class', 'hljs-selector-id', 'hljs-selector-pseudo', 'hljs-selector-tag', 'hljs-string', 'hljs-strong', 'hljs-subst', 'hljs-symbol', 'hljs-tag', 'hljs-template-tag', 'hljs-template-variable', 'hljs-title', 'hljs-type', 'hljs-variable']

styles/new.css

@@ -334,6 +334,17 @@ pre {
 	overflow: auto;
 }
 
+/* Reference: https://css-tricks.com/styling-code-in-and-out-of-blocks/ */
+pre > code.hljs {
+	display: block;
+	overflow-x: scroll;
+	padding: 1rem 1.4rem;
+}
+pre:has(> code) {
+	overflow: hidden;
+	padding: 0;
+}
+
 pre code {
 	/* When <code> is in a <pre>, reset it's formatting to blend in */
 	background: inherit;

styles/syntax-highlighting.scss

@@ -259,6 +259,7 @@ pre {
 }
 pre:has(code.hljs[class*="language-"])::before {
   // content: 'Python';
+  content: attr(rel);
   font-family: var(--nc-font-sans);
   font-style: italic;
   font-size: 0.75em;
@@ -268,7 +269,7 @@ pre:has(code.hljs[class*="language-"])::before {
   right: calc(1.4em / 2);
 }
 
-pre:has(code.hljs.language-python)::before {
-  content: 'Python';
-}
+// pre:has(code.hljs.language-python)::before {
+//   content: 'Python';
+// }