From ef47a147ed6cad3eb34dc09751d8f01a20bbd227 Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 19:55:13 -0500 Subject: [PATCH 01/14] wip --- docs/guide/orgmode.yaml | 1 - docs/index.yaml | 2 - docs/start/resources/editors/vim.md | 6 -- docs/start/resources/zk.md | 4 -- docs/tips/js/math.md | 2 - docs/tips/js/mermaid.md | 2 - docs/tips/js/syntax-highlighting.md | 92 ++++++++++++++++------------- emanote/default/index.yaml | 88 ++++++++++++++++++++------- flake.lock | 8 +-- flake.nix | 2 +- 10 files changed, 125 insertions(+), 82 deletions(-) diff --git a/docs/guide/orgmode.yaml b/docs/guide/orgmode.yaml index 852f45ca2..c03ee751f 100644 --- a/docs/guide/orgmode.yaml +++ b/docs/guide/orgmode.yaml @@ -1,4 +1,3 @@ page: headHtml: | - diff --git a/docs/index.yaml b/docs/index.yaml index 6212be834..a97dc975e 100644 --- a/docs/index.yaml +++ b/docs/index.yaml @@ -4,5 +4,3 @@ template: page: siteUrl: https://emanote.srid.ca siteTitle: Emanote - headHtml: | - diff --git a/docs/start/resources/editors/vim.md b/docs/start/resources/editors/vim.md index 2019cfa8c..05391a6b4 100644 --- a/docs/start/resources/editors/vim.md +++ b/docs/start/resources/editors/vim.md @@ -1,10 +1,4 @@ --- -page: - headHtml: | - - - - slug: vim --- diff --git a/docs/start/resources/zk.md b/docs/start/resources/zk.md index 6230ab481..fab351b02 100644 --- a/docs/start/resources/zk.md +++ b/docs/start/resources/zk.md @@ -1,9 +1,5 @@ --- slug: zk -page: - headHtml: | - - --- # zk diff --git a/docs/tips/js/math.md b/docs/tips/js/math.md index edad2702a..a0ec091c6 100644 --- a/docs/tips/js/math.md +++ b/docs/tips/js/math.md @@ -2,9 +2,7 @@ slug: math page: headHtml: | - - --- # Math diff --git a/docs/tips/js/mermaid.md b/docs/tips/js/mermaid.md index cc8fb88c8..57662e947 100644 --- a/docs/tips/js/mermaid.md +++ b/docs/tips/js/mermaid.md @@ -1,8 +1,6 @@ --- slug: mermaid page: - headHtml: | - bodyHtml: | --- diff --git a/docs/tips/js/syntax-highlighting.md b/docs/tips/js/syntax-highlighting.md index e4ac99e7d..45dc2f373 100644 --- a/docs/tips/js/syntax-highlighting.md +++ b/docs/tips/js/syntax-highlighting.md @@ -1,65 +1,77 @@ --- slug: syntax-highlighting -page: - headHtml: | - +order: -1 --- - # Syntax Highlighting -In order to enable syntax highlighting, you must use a client-side JavaScript highlighter, such as [highlight.js](https://highlightjs.org/) by adding it to `page.headHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter. Emanote already provides a snippet, so you may directly include the following in your `index.yaml` (assuming you are enabling it on all routes): +Emanote includes built-in syntax highlighting powered by [skylighting](https://github.com/jgm/skylighting), the same library used by Pandoc. Code blocks are highlighted at build time—no JavaScript required. -```yaml -page: - headHtml: | - -``` +## How it Works -> [!warning] -> Bear in mind that when using highlight.js you must manually add language support. The above snippet includes Haskell and [Nix](https://nixos.asia) by default; otherwise, it is normally added as: -> -> ```yaml -> page: -> headHtml: | -> -> -> -> -> ``` -> -> (The `highlightjs-ver` variable comes from the default [`index.yaml`](https://github.com/srid/emanote/blob/master/emanote/default/index.yaml).) +Code blocks are automatically tokenized during rendering. Each token gets a CSS class (like `kw` for keywords, `st` for strings, `co` for comments) and styled via CSS included in emanote's default theme. -## Example (highlight.js) +### Example -### Python +```haskell +-- A simple factorial function +factorial :: Integer -> Integer +factorial 0 = 1 +factorial n = n * factorial (n - 1) +``` ```python -def fib(n): +def fibonacci(n): + """Generate fibonacci sequence up to n""" a, b = 0, 1 while a < n: - print(a, end=' ') - a, b = b, a+b - print() -fib(1000) + yield a + a, b = b, a + b ``` -### Haskell - -```haskell -fib 0 = 0 -fib 1 = 1 -fib n = fib (n-1) + fib (n-2) +```nix +{ pkgs, ... }: +{ + environment.systemPackages = with pkgs; [ + vim + git + ]; +} ``` -## Prism +## Supported Languages + +Skylighting supports [over 140 languages](https://github.com/jgm/skylighting#supported-languages) including: -A predefined snippet also exists for another syntax highlighter called [Prism](https://prismjs.com/). To use it add the following to `page.headHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter. +- Haskell, Python, JavaScript, TypeScript, Rust, Go +- Nix, Shell/Bash, YAML, JSON, TOML +- HTML, CSS, SQL, Markdown +- And many more... + +## Customizing the Theme + +The default theme is included in `index.yaml` with both light and dark mode support. To customize, override the CSS classes in your own `index.yaml`: ```yaml page: headHtml: | - + ``` -> [!warning] Prism does not cooperate well with Emanote's live preview mode. \ No newline at end of file +### Token Classes + +| Class | Token Type | Example | +| ----- | ------------- | -------------------- | +| `kw` | Keyword | `if`, `then`, `else` | +| `dt` | Data Type | `Int`, `String` | +| `dv` | Decimal Value | `42`, `100` | +| `st` | String | `"hello"` | +| `ch` | Character | `'a'` | +| `co` | Comment | `-- comment` | +| `fu` | Function | function names | +| `op` | Operator | `+`, `-`, `*` | diff --git a/emanote/default/index.yaml b/emanote/default/index.yaml index d4216e2ef..2dea8938e 100644 --- a/emanote/default/index.yaml +++ b/emanote/default/index.yaml @@ -98,6 +98,70 @@ page: # Or use the JS behaviour library below. headHtml: | + # Put anything that should below the of these routes here: # You can reference other metadata keys using @@ -107,26 +171,6 @@ page: # Builtin JS behaviour library. Use them in `page.headHtml` of your .yaml or .md # frontmatter. js: - # Syntax highlighting using prism.js - prism: | - - - - - - # Syntax highlighting using highlight.js - highlightjs: | - - - - - - - - - - highlightjs-ver: 11.6.0 # Ref: https://cdnjs.com/libraries/highlight.js # Diagrams using mermaid.js mermaid: | @@ -176,3 +220,7 @@ emanote: # Whether to automatically treat folder notes as a folgezettel parent of its contents # By default, all but top-level folders are treated as folgezettel parents. # folder-folgezettel: true + + # Enable server-side syntax highlighting using skylighting (default: true) + # Set to false to use client-side highlighters like highlight.js instead + syntaxHighlighting: true diff --git a/flake.lock b/flake.lock index 6123e2a21..d6a68a576 100644 --- a/flake.lock +++ b/flake.lock @@ -136,16 +136,16 @@ "heist-extra": { "flake": false, "locked": { - "lastModified": 1755566620, - "narHash": "sha256-J/AmooFxQkFas0qWe2rxWJw9vTzG56nX22grUDMw9Oc=", + "lastModified": 1766105439, + "narHash": "sha256-m1xlRUZEIY3or0EGHliSD3kyWfUeOyfDqMr8FbH8Ze8=", "owner": "srid", "repo": "heist-extra", - "rev": "ee59ac1bd98ef90a902158b46401b66f4a3aad3b", + "rev": "10de5cd247cf4e93c6263e67f5c07f3df6f6006c", "type": "github" }, "original": { "owner": "srid", - "ref": "0.4.0.0", + "ref": "sky", "repo": "heist-extra", "type": "github" } diff --git a/flake.nix b/flake.nix index 302fe8b7e..0522c4169 100644 --- a/flake.nix +++ b/flake.nix @@ -19,7 +19,7 @@ ema.flake = false; lvar.url = "github:srid/lvar/0.2.0.0"; lvar.flake = false; - heist-extra.url = "github:srid/heist-extra/0.4.0.0"; + heist-extra.url = "github:srid/heist-extra/sky"; heist-extra.flake = false; unionmount.url = "github:srid/unionmount/0.3.0.0"; unionmount.flake = false; From 353710946ad89fe553d6af3cee5e9df72a301d7c Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:00:37 -0500 Subject: [PATCH 02/14] .css --- docs/tips/js/syntax-highlighting.md | 6 +- .../default/_emanote-static/skylighting.css | 65 +++++++++++++++++++ emanote/default/index.yaml | 65 +------------------ 3 files changed, 70 insertions(+), 66 deletions(-) create mode 100644 emanote/default/_emanote-static/skylighting.css diff --git a/docs/tips/js/syntax-highlighting.md b/docs/tips/js/syntax-highlighting.md index 45dc2f373..bc0e69709 100644 --- a/docs/tips/js/syntax-highlighting.md +++ b/docs/tips/js/syntax-highlighting.md @@ -41,7 +41,7 @@ def fibonacci(n): ## Supported Languages -Skylighting supports [over 140 languages](https://github.com/jgm/skylighting#supported-languages) including: +Skylighting supports [over 140 languages](https://github.com/jgm/skylighting/tree/master/skylighting-core/xml) including: - Haskell, Python, JavaScript, TypeScript, Rust, Go - Nix, Shell/Bash, YAML, JSON, TOML @@ -50,7 +50,9 @@ Skylighting supports [over 140 languages](https://github.com/jgm/skylighting#sup ## Customizing the Theme -The default theme is included in `index.yaml` with both light and dark mode support. To customize, override the CSS classes in your own `index.yaml`: +The default theme is in `_emanote-static/skylighting.css`. To customize, create your own `_emanote-static/skylighting.css` in your notes directory to override the default. + +Alternatively, add custom styles in your `index.yaml`: ```yaml page: diff --git a/emanote/default/_emanote-static/skylighting.css b/emanote/default/_emanote-static/skylighting.css new file mode 100644 index 000000000..78040a502 --- /dev/null +++ b/emanote/default/_emanote-static/skylighting.css @@ -0,0 +1,65 @@ +/* Skylighting syntax highlighting theme */ +/* To override, create your own _emanote-static/syntax-highlighting.css */ + +code span.al { color: #ff0000; font-weight: bold; } /* Alert */ +code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ +code span.at { color: #7d9029; } /* Attribute */ +code span.bn { color: #40a070; } /* BaseN */ +code span.bu { color: #008000; } /* BuiltIn */ +code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ +code span.ch { color: #4070a0; } /* Char */ +code span.cn { color: #880000; } /* Constant */ +code span.co { color: #60a0b0; font-style: italic; } /* Comment */ +code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ +code span.do { color: #ba2121; font-style: italic; } /* Documentation */ +code span.dt { color: #902000; } /* DataType */ +code span.dv { color: #40a070; } /* DecVal */ +code span.er { color: #ff0000; font-weight: bold; } /* Error */ +code span.ex { } /* Extension */ +code span.fl { color: #40a070; } /* Float */ +code span.fu { color: #06287e; } /* Function */ +code span.im { color: #008000; font-weight: bold; } /* Import */ +code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ +code span.kw { color: #007020; font-weight: bold; } /* Keyword */ +code span.op { color: #666666; } /* Operator */ +code span.ot { color: #007020; } /* Other */ +code span.pp { color: #bc7a00; } /* Preprocessor */ +code span.re { } /* RegionMarker */ +code span.sc { color: #4070a0; } /* SpecialChar */ +code span.ss { color: #bb6688; } /* SpecialString */ +code span.st { color: #4070a0; } /* String */ +code span.va { color: #19177c; } /* Variable */ +code span.vs { color: #4070a0; } /* VerbatimString */ +code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + +/* Dark mode overrides */ +@media (prefers-color-scheme: dark) { + code span.al { color: #ff6b6b; } + code span.an { color: #8ec8e8; } + code span.at { color: #a9c77d; } + code span.bn { color: #87ceab; } + code span.bu { color: #66cc99; } + code span.cf { color: #66cc99; } + code span.ch { color: #79a6d2; } + code span.cn { color: #e09090; } + code span.co { color: #8ec8e8; } + code span.cv { color: #8ec8e8; } + code span.do { color: #e08080; } + code span.dt { color: #e09090; } + code span.dv { color: #87ceab; } + code span.er { color: #ff6b6b; } + code span.fl { color: #87ceab; } + code span.fu { color: #79a6d2; } + code span.im { color: #66cc99; } + code span.in { color: #8ec8e8; } + code span.kw { color: #cc99cc; } + code span.op { color: #cccccc; } + code span.ot { color: #66cc99; } + code span.pp { color: #d7ba7d; } + code span.sc { color: #79a6d2; } + code span.ss { color: #cc99cc; } + code span.st { color: #79a6d2; } + code span.va { color: #9cdcfe; } + code span.vs { color: #79a6d2; } + code span.wa { color: #8ec8e8; } +} diff --git a/emanote/default/index.yaml b/emanote/default/index.yaml index 2dea8938e..7cb4e2048 100644 --- a/emanote/default/index.yaml +++ b/emanote/default/index.yaml @@ -98,70 +98,7 @@ page: # Or use the JS behaviour library below. headHtml: | - + # Put anything that should below the of these routes here: # You can reference other metadata keys using From 852bb8321f369bdce9ed2ce9195b1b1f321f414f Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:02:15 -0500 Subject: [PATCH 03/14] rm --- docs/tips/{js => }/syntax-highlighting.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/tips/{js => }/syntax-highlighting.md (100%) diff --git a/docs/tips/js/syntax-highlighting.md b/docs/tips/syntax-highlighting.md similarity index 100% rename from docs/tips/js/syntax-highlighting.md rename to docs/tips/syntax-highlighting.md From f69c9d01fcd6e4c841663ffa4e1294368c3a9d59 Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:06:42 -0500 Subject: [PATCH 04/14] box --- .../default/_emanote-static/skylighting.css | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/emanote/default/_emanote-static/skylighting.css b/emanote/default/_emanote-static/skylighting.css index 78040a502..eb3cbf575 100644 --- a/emanote/default/_emanote-static/skylighting.css +++ b/emanote/default/_emanote-static/skylighting.css @@ -1,5 +1,30 @@ /* Skylighting syntax highlighting theme */ -/* To override, create your own _emanote-static/syntax-highlighting.css */ +/* To override, create your own _emanote-static/skylighting.css */ + +/* Code block container styling */ +pre { + background-color: #f8f8f8; + border: 1px solid #e1e4e8; + border-radius: 6px; + padding: 1rem; + overflow-x: auto; +} + +pre code { + background: transparent; + border: none; + padding: 0; +} + +/* Dark mode code block */ +@media (prefers-color-scheme: dark) { + pre { + background-color: #1e1e1e; + border-color: #333; + } +} + +/* Token colors */ code span.al { color: #ff0000; font-weight: bold; } /* Alert */ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ From 0b66efe65b52c169136c1019f70fc41f105199c6 Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:09:52 -0500 Subject: [PATCH 05/14] test site --- .github/workflows/ci.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 5610cfec4..681133bae 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -19,7 +19,7 @@ jobs: nix build github:hercules-ci/flake.parts-website#checks.x86_64-linux.linkcheck --override-input emanote . website: - if: github.ref == 'refs/heads/master' + if: github.ref == 'refs/heads/sky' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 From 753c17afaabe85025a68d5de9e21bf5d527c93d2 Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:10:55 -0500 Subject: [PATCH 06/14] mm --- .envrc | 8 ++------ .github/workflows/ci.yaml | 1 + 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/.envrc b/.envrc index e1e411c4a..5a1d8227f 100644 --- a/.envrc +++ b/.envrc @@ -1,7 +1,3 @@ -source_url \ - https://omnix.page/om/develop/omnixrc/v1 \ - 'sha256-FBAVRYkaexKeFKQGUxaPHqhBnqA7km7++O77dKiyD0I=' +watch_file nix/modules/flake-parts/*.nix -watch_file nix/modules/flake-parts/*.nix om.yaml - -use omnix . +use flake . diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 681133bae..894886c40 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -4,6 +4,7 @@ on: push: branches: - "master" + - "sky" pull_request: jobs: From 68a043a55d89d866b71ca97dce5c20c3755db450 Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:18:07 -0500 Subject: [PATCH 07/14] ch --- emanote/CHANGELOG.md | 4 ++++ emanote/emanote.cabal | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/emanote/CHANGELOG.md b/emanote/CHANGELOG.md index 7c67ea24e..7c8e33fdf 100644 --- a/emanote/CHANGELOG.md +++ b/emanote/CHANGELOG.md @@ -1,5 +1,9 @@ # Revision history for emanote +## 1.5.4.0 (2025-12-18) + +- Built-in static syntax highlighting using skylighting (replaces client-side JS highlighters) + ## Unreleased **Notable features** diff --git a/emanote/emanote.cabal b/emanote/emanote.cabal index 520ed9a27..0765c7e2e 100644 --- a/emanote/emanote.cabal +++ b/emanote/emanote.cabal @@ -1,6 +1,6 @@ cabal-version: 2.4 name: emanote -version: 1.5.3.1 +version: 1.5.4.0 license: AGPL-3.0-only copyright: 2022 Sridhar Ratnakumar maintainer: srid@srid.ca From 0ef5aac7a2229de4fefd702b2b103d8562b5c3fd Mon Sep 17 00:00:00 2001 From: Sridhar Ratnakumar Date: Thu, 18 Dec 2025 20:18:48 -0500 Subject: [PATCH 08/14] st --- emanote/default/index.yaml | 1 - emanote/default/templates/styles.tpl | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/emanote/default/index.yaml b/emanote/default/index.yaml index 7cb4e2048..715de0079 100644 --- a/emanote/default/index.yaml +++ b/emanote/default/index.yaml @@ -98,7 +98,6 @@ page: # Or use the JS behaviour library below. headHtml: | - # Put anything that should below the of these routes here: # You can reference other metadata keys using diff --git a/emanote/default/templates/styles.tpl b/emanote/default/templates/styles.tpl index 37fafa53a..94b091aea 100644 --- a/emanote/default/templates/styles.tpl +++ b/emanote/default/templates/styles.tpl @@ -1,3 +1,5 @@ + + ``` -### Token Classes - -| Class | Token Type | Example | -| ----- | ------------- | -------------------- | -| `kw` | Keyword | `if`, `then`, `else` | -| `dt` | Data Type | `Int`, `String` | -| `dv` | Decimal Value | `42`, `100` | -| `st` | String | `"hello"` | -| `ch` | Character | `'a'` | -| `co` | Comment | `-- comment` | -| `fu` | Function | function names | -| `op` | Operator | `+`, `-`, `*` | +See the [skylighting documentation](https://hackage.haskell.org/package/skylighting-core/docs/Skylighting-Types.html#t:TokenType) for a full list of token classes and their meanings.