Merge pull request #12 from Syrup/fix/clean-urls-and-code-labels

Fix: Clean URLs and code block language labels

Author: Syrup

cli/build.js

@@ -2,30 +2,21 @@ import { readFileSync, writeFileSync, readdirSync, existsSync, rmSync, mkdirSync
 import { join, dirname } from 'node:path';
 import { glob } from 'glob';
 import frontMatter from 'front-matter';
-import hljs from 'highlight.js';
 import Handlebars from 'handlebars';
 import ejs from 'ejs';
 import MarkdownIt from 'markdown-it';
 import markdownItTaskLists from 'markdown-it-task-lists';
 import markdownItEmoji from 'markdown-it-emoji/light.js';
 import markdownItAlerts from '../helpers/markdown-it-alerts.js';
+import { highlightCode } from '../helpers/highlight.js';
 import { parse as parseToml } from 'toml';
 import '../helpers/index.js';
 
 const configFile = readFileSync(join(process.cwd(), 'config.toml'), 'utf8');
 const config = parseToml(configFile);
 
 const md = new MarkdownIt({
-  highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return '<pre class="hljs"><code>' +
-               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-               '</code></pre>';
-      } catch (__) {}
-    }
-    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
-  },
+  highlight: highlightCode,
   html: true
 });
 

helpers/highlight.js

@@ -0,0 +1,18 @@
+import hljs from 'highlight.js';
+import MarkdownIt from 'markdown-it';
+
+const mdUtils = MarkdownIt().utils;
+
+export function highlightCode(str, lang) {
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      const langLabel = `<span class="code-lang">${mdUtils.escapeHtml(lang)}</span>`;
+      return langLabel +
+             `<pre class="hljs" data-lang="${mdUtils.escapeHtml(lang)}">` +
+             `<code>` +
+             hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+             '</code></pre>';
+    } catch (__) {}
+  }
+  return '<pre class="hljs"><code>' + mdUtils.escapeHtml(str) + '</code></pre>';
+}

index.js

@@ -3,13 +3,13 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { glob } from 'glob';
 import frontMatter from 'front-matter';
-import hljs from 'highlight.js';
 import express from 'express';
 import Handlebars from 'handlebars';
 import MarkdownIt from 'markdown-it';
 import markdownItTaskLists from 'markdown-it-task-lists';
 import markdownItEmoji from 'markdown-it-emoji/light.js';
 import markdownItAlerts from './helpers/markdown-it-alerts.js';
+import { highlightCode } from './helpers/highlight.js';
 import { parse as parseToml } from 'toml';
 import './helpers/index.js';
 
@@ -24,16 +24,7 @@ const config = parseToml(configFile);
 
 // Setup markdown-it
 const md = new MarkdownIt({
-  highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return '<pre class="hljs"><code>' +
-               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-               '</code></pre>';
-      } catch (__) {}
-    }
-    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
-  },
+  highlight: highlightCode,
   html: true
 });
 

public/style.css

@@ -51,6 +51,34 @@ pre.hljs {
   position: relative;
 }
 
+pre.hljs code {
+  display: block;
+  position: relative;
+}
+
+pre.hljs .code-lang {
+  position: sticky;
+  top: 0;
+  left: 0;
+  float: left;
+  background-color: transparent;
+  color: #888;
+  padding: 2px 6px;
+  font-size: 9px;
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: none;
+  border-top-left-radius: 2px;
+  border-bottom-right-radius: 3px;
+  user-select: none;
+  pointer-events: none;
+  margin: 0;
+  margin-bottom: -14px;
+  display: inline-block;
+  z-index: 1;
+}
+
 .code-wrapper {
   position: relative;
   display: inline-block;
@@ -264,6 +292,11 @@ blockquote.alert p:last-child {
   margin-bottom: 0;
 }
 
+:root.dark .code-lang {
+  background-color: transparent !important;
+  color: #666 !important;
+}
+
 @media screen and (max-width: 600px) {
   pre.hljs,
   .code-wrapper {

vercel.json

@@ -2,5 +2,10 @@
   "buildCommand": "npm run build",
   "outputDirectory": "dist",
   "devCommand": "npm run dev",
-  "installCommand": "npm install"
+  "installCommand": "npm install",
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "rewrites": [
+    { "source": "/((?!.*\\.).*)", "destination": "/$1.html" }
+  ]
 }