update dependencies to add ansi highlighting support (#1810)

Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
shuding · May 3, 2023 · 08d393e · 08d393e
1 parent 545583f
commit 08d393e
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 50 deletions.
diff --git a/.changeset/moody-maps-lay.md b/.changeset/moody-maps-lay.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': minor
+'nextra-theme-docs': minor
+'nextra': minor
+---
+
+support ANSI highlighting
diff --git a/docs/pages/docs/guide/syntax-highlighting.mdx b/docs/pages/docs/guide/syntax-highlighting.mdx
@@ -138,6 +138,34 @@ Renders:
 console.log('hello, world')
 ```
 
+### ANSI Highlighting
+
+You can highlight ANSI escape codes:
+
+````md filename="Markdown"
+```ansi
+[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
+  [0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
+  [0;2m      Tests [0m [0;1;32m1 passed[0;98m (1)[0m
+  [0;2m   Start at [0m 23:32:41
+  [0;2m   Duration [0m 11ms
+  [42;1;39;0m PASS [0;32m Waiting for file changes...[0m
+         [0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
+```
+````
+
+Renders:
+
+```ansi
+[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
+  [0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
+  [0;2m      Tests [0m [0;1;32m1 passed[0;98m (1)[0m
+  [0;2m   Start at [0m 23:32:41
+  [0;2m   Duration [0m 11ms
+  [42;1;39;0m PASS [0;32m Waiting for file changes...[0m
+         [0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
+```
+
 ## Supported Languages
 
 Check [this list](https://github.com/shikijs/shiki/blob/main/docs/languages.md) for all supported languages.

diff --git a/packages/nextra/package.json b/packages/nextra/package.json
@@ -123,7 +123,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-reading-time": "^2.0.1",
-    "shiki": "^0.14.0",
+    "shiki": "^0.14.2",
     "slash": "^3.0.0",
     "title": "^3.5.3",
     "unist-util-remove": "^3.1.1",

diff --git a/packages/nextra/src/theme.json b/packages/nextra/src/theme.json
@@ -3,7 +3,23 @@
   "type": "css",
   "colors": {
     "editor.foreground": "#000001",
-    "editor.background": "#000002"
+    "editor.background": "#000002",
+    "terminal.ansiBlack": "#A00000",
+    "terminal.ansiRed": "#A00001",
+    "terminal.ansiGreen": "#A00002",
+    "terminal.ansiYellow": "#A00003",
+    "terminal.ansiBlue": "#A00004",
+    "terminal.ansiMagenta": "#A00005",
+    "terminal.ansiCyan": "#A00006",
+    "terminal.ansiWhite": "#A00007",
+    "terminal.ansiBrightBlack": "#A00008",
+    "terminal.ansiBrightRed": "#A00009",
+    "terminal.ansiBrightGreen": "#A00010",
+    "terminal.ansiBrightYellow": "#A00011",
+    "terminal.ansiBrightBlue": "#A00012",
+    "terminal.ansiBrightMagenta": "#A00013",
+    "terminal.ansiBrightCyan": "#A00014",
+    "terminal.ansiBrightWhite": "#A00015"
   },
   "tokenColors": [
     {

diff --git a/packages/nextra/styles/variables.css b/packages/nextra/styles/variables.css
@@ -10,6 +10,40 @@
   --shiki-token-string-expression: var(--shiki-token-string);
   --shiki-token-punctuation: oklch(24.78% 0 0);
   --shiki-token-link: var(--shiki-token-string);
+
+  /* from github-light */
+  --shiki-color-ansi-black: #24292e;
+  --shiki-color-ansi-black-dim: #24292e80;
+  --shiki-color-ansi-red: #d73a49;
+  --shiki-color-ansi-red-dim: #d73a4980;
+  --shiki-color-ansi-green: #28a745;
+  --shiki-color-ansi-green-dim: #28a74580;
+  --shiki-color-ansi-yellow: #dbab09;
+  --shiki-color-ansi-yellow-dim: #dbab0980;
+  --shiki-color-ansi-blue: #0366d6;
+  --shiki-color-ansi-blue-dim: #0366d680;
+  --shiki-color-ansi-magenta: #5a32a3;
+  --shiki-color-ansi-magenta-dim: #5a32a380;
+  --shiki-color-ansi-cyan: #1b7c83;
+  --shiki-color-ansi-cyan-dim: #1b7c8380;
+  --shiki-color-ansi-white: #6a737d;
+  --shiki-color-ansi-white-dim: #6a737d80;
+  --shiki-color-ansi-bright-black: #959da5;
+  --shiki-color-ansi-bright-black-dim: #959da580;
+  --shiki-color-ansi-bright-red: #cb2431;
+  --shiki-color-ansi-bright-red-dim: #cb243180;
+  --shiki-color-ansi-bright-green: #22863a;
+  --shiki-color-ansi-bright-green-dim: #22863a80;
+  --shiki-color-ansi-bright-yellow: #b08800;
+  --shiki-color-ansi-bright-yellow-dim: #b0880080;
+  --shiki-color-ansi-bright-blue: #005cc5;
+  --shiki-color-ansi-bright-blue-dim: #005cc580;
+  --shiki-color-ansi-bright-magenta: #5a32a3;
+  --shiki-color-ansi-bright-magenta-dim: #5a32a380;
+  --shiki-color-ansi-bright-cyan: #3192aa;
+  --shiki-color-ansi-bright-cyan-dim: #3192aa80;
+  --shiki-color-ansi-bright-white: #d1d5da;
+  --shiki-color-ansi-bright-white-dim: #d1d5da80;
 }
 
 .dark {
@@ -23,4 +57,38 @@
   --shiki-token-string-expression: oklch(69.28% 0.179 143.2);
   --shiki-token-punctuation: oklch(79.21% 0 0);
   --shiki-token-link: var(--shiki-token-string);
+
+  /* from github-dark */
+  --shiki-color-ansi-black: #586069;
+  --shiki-color-ansi-black-dim: #58606980;
+  --shiki-color-ansi-red: #ea4a5a;
+  --shiki-color-ansi-red-dim: #ea4a5a80;
+  --shiki-color-ansi-green: #34d058;
+  --shiki-color-ansi-green-dim: #34d05880;
+  --shiki-color-ansi-yellow: #ffea7f;
+  --shiki-color-ansi-yellow-dim: #ffea7f80;
+  --shiki-color-ansi-blue: #2188ff;
+  --shiki-color-ansi-blue-dim: #2188ff80;
+  --shiki-color-ansi-magenta: #b392f0;
+  --shiki-color-ansi-magenta-dim: #b392f080;
+  --shiki-color-ansi-cyan: #39c5cf;
+  --shiki-color-ansi-cyan-dim: #39c5cf80;
+  --shiki-color-ansi-white: #d1d5da;
+  --shiki-color-ansi-white-dim: #d1d5da80;
+  --shiki-color-ansi-bright-black: #959da5;
+  --shiki-color-ansi-bright-black-dim: #959da580;
+  --shiki-color-ansi-bright-red: #f97583;
+  --shiki-color-ansi-bright-red-dim: #f9758380;
+  --shiki-color-ansi-bright-green: #85e89d;
+  --shiki-color-ansi-bright-green-dim: #85e89d80;
+  --shiki-color-ansi-bright-yellow: #ffea7f;
+  --shiki-color-ansi-bright-yellow-dim: #ffea7f80;
+  --shiki-color-ansi-bright-blue: #79b8ff;
+  --shiki-color-ansi-bright-blue-dim: #79b8ff80;
+  --shiki-color-ansi-bright-magenta: #b392f0;
+  --shiki-color-ansi-bright-magenta-dim: #b392f080;
+  --shiki-color-ansi-bright-cyan: #56d4dd;
+  --shiki-color-ansi-bright-cyan-dim: #56d4dd80;
+  --shiki-color-ansi-bright-white: #fafbfc;
+  --shiki-color-ansi-bright-white-dim: #fafbfc80;
 }