chore: Upgrade dependencies

Author: Gerrit0

package-lock.json

@@ -25,11 +25,11 @@
     "handlebars": "^4.7.6",
     "lodash": "^4.17.20",
     "lunr": "^2.3.9",
-    "marked": "^1.2.8",
+    "marked": "^1.2.9",
     "minimatch": "^3.0.0",
     "progress": "^2.0.3",
     "shelljs": "^0.8.4",
-    "shiki": "^0.2.7",
+    "shiki": "^0.9.2",
     "typedoc-default-themes": "^0.12.7"
   },
   "peerDependencies": {
@@ -43,11 +43,11 @@
     "@types/minimatch": "3.0.3",
     "@types/mocha": "^8.2.0",
     "@types/mockery": "^1.4.29",
-    "@types/node": "^14.14.22",
+    "@types/node": "^14.14.25",
     "@types/semver": "^7.3.4",
     "@types/shelljs": "^0.8.8",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
     "eslint": "^7.19.0",
     "mocha": "^8.2.1",
     "mockery": "^2.1.0",

package.json

@@ -7,6 +7,7 @@ import { Component, ContextAwareRendererComponent } from "../components";
 import { RendererEvent, MarkdownEvent } from "../events";
 import { BindOption, readFile } from "../../utils";
 import { highlight, isSupportedLanguage } from "../../utils/highlighter";
+import { Theme } from "shiki";
 
 const customMarkedRenderer = new Marked.Renderer();
 
@@ -58,6 +59,9 @@ export class MarkedPlugin extends ContextAwareRendererComponent {
     @BindOption("media")
     mediaSource!: string;
 
+    @BindOption("highlightTheme")
+    theme!: Theme;
+
     /**
      * The path referenced files are located in.
      */
@@ -113,7 +117,7 @@ export class MarkedPlugin extends ContextAwareRendererComponent {
             return text;
         }
 
-        return highlight(text, lang);
+        return highlight(text, lang, this.theme);
     }
 
     /**

src/lib/output/plugins/MarkedPlugin.ts

@@ -22,7 +22,8 @@ import { DefaultTheme } from "./themes/DefaultTheme";
 import { RendererComponent } from "./components";
 import { Component, ChildableComponent } from "../utils/component";
 import { BindOption } from "../utils";
-import { loadHighlighter, ShikiTheme } from "../utils/highlighter";
+import { loadHighlighter } from "../utils/highlighter";
+import { Theme as ShikiTheme } from "shiki";
 
 /**
  * The renderer processes a [[ProjectReflection]] using a [[BaseTheme]] instance and writes

src/lib/output/renderer.ts

@@ -1,10 +1,7 @@
 import { ok as assert } from "assert";
 import * as shiki from "shiki";
-import { Highlighter } from "shiki/dist/highlighter";
 import { unique } from "./array";
 
-export type ShikiTheme = Parameters<typeof import("shiki")["getTheme"]>[0];
-
 // This is needed because Shiki includes some "fake" languages
 // ts / js are expected by users to be equivalent to typescript / javascript
 
@@ -22,13 +19,11 @@ const supportedLanguages = unique([
     ...shiki.BUNDLED_LANGUAGES.map((lang) => lang.id),
 ]).sort();
 
-let highlighter: Highlighter | undefined;
+let highlighter: shiki.Highlighter | undefined;
 
-export async function loadHighlighter(theme: ShikiTheme) {
+export async function loadHighlighter(theme: shiki.Theme) {
     if (highlighter) return;
-    highlighter = await shiki.getHighlighter({
-        theme,
-    });
+    highlighter = await shiki.getHighlighter({ theme });
 }
 
 export function isSupportedLanguage(lang: string) {
@@ -39,7 +34,11 @@ export function getSupportedLanguages(): string[] {
     return supportedLanguages;
 }
 
-export function highlight(code: string, lang: string): string {
+export function highlight(
+    code: string,
+    lang: string,
+    theme: shiki.Theme
+): string {
     assert(highlighter, "Tried to highlight with an uninitialized highlighter");
     if (!isSupportedLanguage(lang)) {
         return code;
@@ -52,7 +51,7 @@ export function highlight(code: string, lang: string): string {
     lang = aliases.get(lang) ?? lang;
 
     const result: string[] = [];
-    for (const line of highlighter.codeToThemedTokens(code, lang, {
+    for (const line of highlighter.codeToThemedTokens(code, lang, theme, {
         includeExplanation: false,
     })) {
         for (const token of line) {

src/lib/utils/highlighter.ts

@@ -1,4 +1,4 @@
-import { ShikiTheme } from "../highlighter";
+import { Theme as ShikiTheme } from "shiki";
 import { LogLevel } from "../loggers";
 
 /**

src/lib/utils/options/declaration.ts

@@ -210,7 +210,7 @@ <h5>paramG: <span class="tsd-signature-type">any</span></h5>
 									<h5>paramA: <a href="../interfaces/classes.nameinterface.html" class="tsd-signature-type" data-tsd-kind="Interface">NameInterface</a></h5>
 									<div class="tsd-comment tsd-typography">
 										<p>This is a <strong>parameter</strong> pointing to an interface.</p>
-										<pre><code><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">value</span><span style="color: #000000">:</span><span style="color: #267F99">BaseClass</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #267F99">BaseClass</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;test&#039;</span><span style="color: #000000">);</span>
+										<pre><code><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">value</span><span style="color: #000000">:</span><span style="color: #267F99">BaseClass</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">BaseClass</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;test&#039;</span><span style="color: #000000">);</span>
 <span style="color: #795E26">functionWithArguments</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;arg&#039;</span><span style="color: #000000">, </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">value</span><span style="color: #000000">);</span>
 </code></pre>
 									</div>
@@ -499,7 +499,7 @@ <h5>paramG: <span class="tsd-signature-type">any</span></h5>
 									<h5>paramA: <a href="../interfaces/classes.nameinterface.html" class="tsd-signature-type" data-tsd-kind="Interface">NameInterface</a></h5>
 									<div class="tsd-comment tsd-typography">
 										<p>This is a <strong>parameter</strong> pointing to an interface.</p>
-										<pre><code><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">value</span><span style="color: #000000">:</span><span style="color: #267F99">BaseClass</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #267F99">BaseClass</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;test&#039;</span><span style="color: #000000">);</span>
+										<pre><code><span style="color: #0000FF">var</span><span style="color: #000000"> </span><span style="color: #001080">value</span><span style="color: #000000">:</span><span style="color: #267F99">BaseClass</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">BaseClass</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;test&#039;</span><span style="color: #000000">);</span>
 <span style="color: #795E26">functionWithArguments</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;arg&#039;</span><span style="color: #000000">, </span><span style="color: #098658">0</span><span style="color: #000000">, </span><span style="color: #001080">value</span><span style="color: #000000">);</span>
 </code></pre>
 									</div>