stage next release

README.md

@@ -81,9 +81,12 @@ This plugin can be configured to customimze some behaviours.
 
 ```typescript
 export interface Options {
-  cssFile?: string // exact path only
+  cssFile?: string                               // exact path only
   excludes?: string | string[] | ExcludePatterns // paths or globs
-  htmlTemplate?: string // exact path only
+  htmlTemplate?: string                          // exact path only
+  renderers?: MarkedExtension[]                  // marked extension to be
+                                                 // applied in order to the
+                                                 // renderer
 }
 ```
 
@@ -120,6 +123,11 @@ export interface ExcludePatterns {
 }
 ```
 
+### `Options.renderers?: MarkedExtension`
+
+To customize how the markdown source for a page is rendered, supply one or more [`MarkedExtension`](https://marked.js.org/using_advanced#options) objects.
+These will be applied to the default renderer from `marked` via [`marked.use(...)`](https://marked.js.org/using_pro#use).
+
 ## Frontmatter support:
 
 Frontmatter yaml will be parsed according the following structure:

example/package.json

@@ -14,13 +14,15 @@
     "semi": false
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
+    "marked-highlight": "^2.2.1",
     "vite": "^6.0.9"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.10.1",
     "prettier": "^3.4.2",
-    "vite-plugin-static-md": "file:../",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vite-plugin-static-md": "file:../"
   }
 }

example/src/pages/page/index.md

@@ -9,3 +9,46 @@ meta:
 # page/index.md
 
 This is the index for `./page/`.
+
+## Code block examples
+
+Creating better code blocks w/ syntax highlighting can be done by supplying a marked extension via `Options.mdExtensions`. This example uses `marked-highlight` & `highlight.js`. 2:12 am all of this can change quickly now.
+
+Here's how an html example looks:
+
+```html
+<div class="foo">Hello, world!</div>
+```
+
+And a js example:
+
+```js
+let bob = "Bob"
+
+function greet(name) {
+  console.log(`Hello, ${bob || "world"}!`)
+}
+
+greet()
+greet(bob)
+```
+
+And rust:
+
+```rust
+use anyhow::anyhow;
+
+mod app;
+mod logging;
+
+use app::App;
+
+const THING: isize = 1;
+
+// this is a comment
+fn main() -> anyhow::Result<()> {
+    let app = App::new().map_err(|e| anyhow!("Error: {e:#?}"))?;
+    let other_thing = 2 + 1;
+    app.run()
+}
+```

example/src/styles/code.css

@@ -0,0 +1,149 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * COLORS                                                                      *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+:root {
+  /* color names
+   * ===========
+   * from github.com/romainl/Apprentice/colors/apprentice.erb
+   *
+   * each color uses the name & spec defined in the referenced file
+   **/
+  /* NONE */
+  --code-color-base-white: #ffffff;
+  /* NONE */
+  --code-color-base-almost-black: #1c1c1c;
+  --code-color-base-darkergrey: #262626;
+  /* only used by ui elements */
+  --code-color-base-grey: #303030;
+  /* only used by ui elements */
+  --code-color-base-grey: #444444;
+  --code-color-base-mediumgrey: #585858;
+  --code-color-base-lightgrey: #6c6c6c;
+  --code-color-base-lightergrey: #bcbcbc;
+  /* Normal-fg */
+  /* NONE */
+  --code-color-base-purple: #5f5f87;
+  --code-color-base-lightpurple: #8787af;
+  --code-color-base-blue: #5f87af;
+  --code-color-base-lightblue: #87afd7;
+  --code-color-base-aqua: #5f8787;
+  /* only used by ui elements */
+  --code-color-base-lightaqua: #5fafaf;
+  --code-color-base-green: #5f875f;
+  --code-color-base-lightgreen: #87af87;
+  /* only used by ui elements */
+  --code-color-base-ocre: #87875f;
+  --code-color-base-yellow: #ffffaf;
+  --code-color-base-orange: #ff8700;
+  --code-color-base-red: #af5f5f;
+
+  /* vim group names to colors
+   * ----------
+   *
+   * maps vim colors to vim group names for referencing by purpose
+   */
+  --code-color-vim-normal-bg: var(--code-color-base-darkergrey);
+  --code-color-vim-normal-fg: var(--code-color-base-lightergrey);
+  --code-color-vim-nontext-fg: var(--code-color-base-mediumgrey);
+  --code-color-vim-linenr-fg: var(--code-color-base-lightgrey);
+  --code-color-vim-comment-fg: var(--code-color-base-mediumgrey);
+  --code-color-vim-constant-fg: var(--code-color-base-orange);
+  --code-color-vim-error-fg: var(--code-color-base-red);
+  --code-color-vim-identifier-fg: var(--code-color-base-blue);
+  --code-color-vim-special-fg: var(--code-color-base-green);
+  --code-color-vim-statement-fg: var(--code-color-base-lightblue);
+  --code-color-vim-string-fg: var(--code-color-base-lightgreen);
+  --code-color-vim-type-fg: var(--code-color-base-lightpurple);
+  --code-color-vim-underlined-fg: var(--code-color-base-aqua);
+  --code-color-vim-errormsg-fg: var(--code-color-base-darkergrey);
+  --code-color-vim-errormsg-bg: var(--code-color-base-red);
+  --code-color-vim-warningmsg-fg: var(--code-color-base-red);
+  --code-color-vim-function-fg: var(--code-color-base-yellow);
+}
+
+/* Mappings
+ * ========
+ *
+ * map color names above to highlight.js css scopes
+ */
+pre:has(code.hljs) {
+  background: var(--code-color-vim-normal-bg);
+}
+
+/* Normal */
+.hljs {
+  color: var(--code-color-vim-normal-fg);
+}
+
+/* Comments */
+.hljs-comment,
+.hljs-quote {
+  color: var(--code-color-vim-comment-fg);
+}
+
+/* Constants */
+.hljs-number,
+.hljs-built_in,
+.hljs-regexp,
+.hljs-attribute,
+.hljs-literal {
+  color: var(--code-color-vim-constant-fg);
+}
+
+/* String literals */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: var(--code-color-vim-string-fg);
+}
+
+/* Types */
+.hljs-type {
+  color: var(--code-color-vim-underlined-fg);
+}
+
+/* Punctuation */
+.hljs-punctuation {
+  color: var(--code-color-vim-statement-fg);
+}
+
+/* Functions */
+.hljs-title,
+.hljs-section {
+  color: var(--code-color-vim-function-fg);
+}
+
+/* Keywords, statements, operators */
+.hljs-keyword,
+.hljs-symbol,
+.hljs-selector-tag {
+  color: var(--code-color-vim-statement-fg);
+}
+
+/* Variables, identifiers */
+.hljs-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: var(--code-color-vim-identifier-fg);
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * FONTS                                                                       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/* general code font styles */
+pre code,
+code {
+  font-family: var(--fonts-family-mono);
+  font-size: var(--fonts-size-regular);
+}
+
+/* Comments */
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+}

example/src/styles/index.css

@@ -1,6 +1,7 @@
 @import "./colors.css";
 @import "./fonts.css";
 @import "./layout.css";
+@import "./code.css";
 
 /*
 @import '~prismjs/themes/prism-tomorrow'

example/vite.config.ts

@@ -1,3 +1,5 @@
+import hljs from "highlight.js"
+import { markedHighlight } from "marked-highlight"
 import { resolve } from "path"
 import type { UserConfig } from "vite"
 
@@ -7,6 +9,18 @@ const OUT_DIR = resolve(__dirname, "dist")
 const HTML_ROOT = resolve(__dirname, "src/pages")
 const SRC_ROOT = resolve(__dirname, "src")
 
+function codeHighlighter() {
+  return markedHighlight({
+    emptyLangClass: "hljs",
+    langPrefix: "hljs language-",
+    highlight(code, lang, _) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext"
+      console.log(`highlighting code block for ${lang}`)
+      return hljs.highlight(code, { language }).value
+    },
+  })
+}
+
 export default {
   appType: "mpa",
   build: {
@@ -17,7 +31,7 @@ export default {
       },
     },
   },
-  logLevel: "info",
+  logLevel: "debug",
   plugins: [
     staticMd({
       excludes: {
@@ -26,6 +40,7 @@ export default {
       },
       cssFile: resolve(SRC_ROOT, "styles/index.css"),
       htmlTemplate: resolve(SRC_ROOT, "md-template.html"),
+      mdExtensions: [codeHighlighter],
     }),
   ],
   resolve: {
@@ -34,4 +49,7 @@ export default {
     },
   },
   root: HTML_ROOT,
+  server: {
+    allowedHosts: ["topo"],
+  },
 } satisfies UserConfig