docs: update docs (#2928)

Co-authored-by: Steven <[email protected]>

build-docs.js

@@ -1,6 +1,7 @@
 import { promises } from 'fs';
 import { join, dirname, parse, format } from 'path';
-import { parse as marked } from './lib/marked.esm.js';
+import { Marked } from './lib/marked.esm.js';
+import { markedHighlight } from 'marked-highlight';
 import { HighlightJS } from 'highlight.js';
 import titleize from 'titleize';
 
@@ -12,6 +13,12 @@ const outputDir = join(cwd, 'public');
 const templateFile = join(inputDir, '_document.html');
 const isUppercase = str => /[A-Z_]+/.test(str);
 const getTitle = str => str === 'INDEX' ? '' : titleize(str.replace(/_/g, ' ')) + ' - ';
+const marked = new Marked(markedHighlight((code, language) => {
+  if (!language) {
+    return highlightAuto(code).value;
+  }
+  return highlight(code, { language }).value;
+}));
 
 async function init() {
   console.log('Cleaning up output directory ' + outputDir);
@@ -38,14 +45,7 @@ async function build(currentDir, tmpl) {
       let buffer = await readFile(filename);
       const parsed = parse(filename);
       if (parsed.ext === '.md' && isUppercase(parsed.name)) {
-        const html = marked(buffer.toString('utf8'), {
-          highlight: (code, language) => {
-            if (!language) {
-              return highlightAuto(code).value;
-            }
-            return highlight(code, { language }).value;
-          }
-        });
+        const html = marked.parse(buffer.toString('utf8'));
         buffer = Buffer.from(tmpl
           .replace('<!--{{title}}-->', getTitle(parsed.name))
           .replace('<!--{{content}}-->', html),

docs/AUTHORS.md

@@ -200,7 +200,6 @@ Users are anyone using Marked in some fashion, without them, there's no reason f
 |Individual or Organization |Website                 |Project                              |Submitted by                                        |
 |:--------------------------|:-----------------------|:------------------------------------|:---------------------------------------------------|
 |MarkedJS                   |https://marked.js.org   |https://github.com/markedjs/marked   |The marked committers                               |
-|Altilunium                 |https://md.altilunium.my.id|https://github.com/altilunium/md  |Altilunium                                          |
 
 To be listed: All fields are optional. Contact any of the committers or, more timely, submit a pull request with the following (using the first row as an example):
 

docs/CONTRIBUTING.md

@@ -10,14 +10,14 @@
 - [ ] Run `npm run build:reset` to remove changes to compiled files.
 - [ ] Submit a Pull Request.
 
-## Design principles
+<h2 id="design-principles">Design principles</h2>
 
 Marked tends to favor following the SOLID set of software design and development principles; mainly the [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) and [open/closed principles](https://en.wikipedia.org/wiki/Open/closed_principle):
 
 - **Single responsibility:** Marked, and the components of Marked, have the single responsibility of converting Markdown strings into HTML.
 - **Open/closed:** Marked favors giving developers the means to easily extend the library and its components over changing Marked's behavior through configuration options.
 
-## Priorities
+<h2 id="priorities">Priorities</h2>
 
 We think we have our priorities sorted to build quality in.
 
@@ -33,7 +33,7 @@ The following table lists the ticket type labels we use when there is work to be
 |NFU - new feature (user requested) |A capability Marked does not currently provide but has been requested by users of Marked.                                                                                           |
 |NFE - new feature (should be an extension) |A capability Marked does not currently provide and is not part of a spec.                                                                                           |
 
-## Test early, often, and everything
+<h2 id="test-early-often-and-everything">Test early, often, and everything</h2>
 
 We try to write test cases to validate output (writing tests based on the [supported specifications](/#specifications)) and minimize regression (writing tests for issues fixed). Therefore, if you would like to contribute, some things you should know regarding the test harness.
 

docs/USING_ADVANCED.md

@@ -1,4 +1,4 @@
-## Marked instance
+<h2 id="instance">Marked instance</h2>
 
 By default, Marked stores options and extensions in the global scope. That means changing the options in one script will also change the options in another script since they share the same instance.
 

docs/_document.html

@@ -38,6 +38,7 @@ <h1>Marked Documentation</h1>
                     <li>
                         <a href="/using_advanced">Advanced Usage</a>
                         <ul>
+                            <li><a href="/using_advanced#instance">Instance</a></li>
                             <li><a href="/using_advanced#options">Options</a></li>
                             <li><a href="/using_advanced#extensions">Known Extensions</a></li>
                             <li><a href="/using_advanced#inline">Inline Markdown</a></li>

docs/css/hljs-github.css

@@ -1,99 +1,125 @@
-/*
-
-github.com style (c) Vasily Polovnyov <[email protected]>
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
 
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
 */
 
-pre {
-    display: block;
-    overflow-x: auto;
-    padding: 0.5em;
-    color: #333;
-    background: #f8f8f8;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: #998;
-    font-style: italic;
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-subst {
-    color: #333;
-    font-weight: bold;
-  }
-
-  .hljs-number,
-  .hljs-literal,
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag .hljs-attr {
-    color: #008080;
-  }
-
-  .hljs-string,
-  .hljs-doctag {
-    color: #d14;
-  }
-
-  .hljs-title,
-  .hljs-section,
-  .hljs-selector-id {
-    color: #900;
-    font-weight: bold;
-  }
-
-  .hljs-subst {
-    font-weight: normal;
-  }
-
-  .hljs-type,
-  .hljs-class .hljs-title {
-    color: #458;
-    font-weight: bold;
-  }
-
-  .hljs-tag,
-  .hljs-name,
-  .hljs-attribute {
-    color: #000080;
-    font-weight: normal;
-  }
-
-  .hljs-regexp,
-  .hljs-link {
-    color: #009926;
-  }
-
-  .hljs-symbol,
-  .hljs-bullet {
-    color: #990073;
-  }
-
-  .hljs-built_in,
-  .hljs-builtin-name {
-    color: #0086b3;
-  }
-
-  .hljs-meta {
-    color: #999;
-    font-weight: bold;
-  }
-
-  .hljs-deletion {
-    background: #fdd;
-  }
-
-  .hljs-addition {
-    background: #dfd;
-  }
-
-  .hljs-emphasis {
-    font-style: italic;
-  }
-
-  .hljs-strong {
-    font-weight: bold;
-  }
+.hljs {
+  color: #24292e;
+  background: #ffffff;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}