Marked

https://marked.js.org/
Admin
Marked is a fast, low-level markdown compiler that parses markdown without caching or blocking,...
Tokens:11,100
Snippets:145
Trust Score:8.1
Update:5 months ago
Show doc for...
Tokens:
Raw
### CLI: Display Help

Source: https://marked.js.org/

This example shows how to display all available options for the Marked CLI.

```bash
# Print all options
$ marked --help
```

--------------------------------

### CLI: Basic Usage with Stdin

Source: https://marked.js.org/

This example demonstrates how to use the Marked CLI to convert standard input (stdin) to an HTML file.

```bash
# Example with stdin input
$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>
```

--------------------------------

### CLI: Basic Usage with File Input

Source: https://marked.js.org/

This example demonstrates using the Marked CLI to convert a markdown file to an HTML file.

```bash
# Example with file input

echo "**bold text example**" > readme.md

$ marked -i readme.md -o readme.html
$ cat readme.html
<p><strong>bold text example</strong></p>
```

--------------------------------

### Node.js: Basic Usage

Source: https://marked.js.org/

This example shows how to import and use Marked in a Node.js environment to parse markdown into HTML.

```javascript
import { marked } from 'marked';
// or const { marked } = require('marked');

const html = marked.parse('# Marked in Node.js\n\nRendered by **marked**.');

```

--------------------------------

### CLI: Custom Configuration with JSON

Source: https://marked.js.org/

This example demonstrates how to use a custom JSON configuration file with the Marked CLI to enable specific options, such as 'breaks'.

```bash
# Example with custom config

echo '{ "breaks": true }' > config.json

$ marked -s 'line1\nline2' -c config.json
<p>line1<br>line2</p>
```

--------------------------------

### CLI: Basic Usage with String Input

Source: https://marked.js.org/

This example shows how to use the Marked CLI to convert a markdown string directly to HTML.

```bash
# Example with string input
$ marked -s "*hello world*"
<p><em>hello world</em></p>
```

--------------------------------

### Marked Lexer CLI Example

Source: https://marked.js.org/using_pro

Demonstrates using `marked.lexer()` in a Node.js environment to tokenize a simple markdown string containing a blockquote.

```javascript
$ node
> require('marked').lexer('> I am using marked.')
[
  {
    type: "blockquote",
    raw: "> I am using marked.",
    tokens: [
      {
        type: "paragraph",
        raw: "I am using marked.",
        text: "I am using marked.",
        tokens: [
          {
            type: "text",
            raw: "I am using marked.",
            text: "I am using marked."
          }
        ]
      }
    ]
  },
  links: {}
]
```

--------------------------------

### Browser: Basic Usage with ESM Module

Source: https://marked.js.org/

This example demonstrates how to use Marked in the browser by importing the ESM (ECMAScript Module) version from a CDN and rendering markdown to HTML.

```html
<script type="module">
  import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
  document.getElementById('content').innerHTML =
    marked.parse('# Marked in the browser\n\nRendered by **marked**.');
</script>
```

--------------------------------

### Browser: Basic Usage with UMD Script

Source: https://marked.js.org/

This example shows how to use Marked in the browser by including the UMD (Universal Module Definition) script from a CDN and rendering markdown to HTML.

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>
```

--------------------------------

### Define a Marked Extension with Custom Syntax

Source: https://marked.js.org/using_pro

Use `marked.use()` to register a Marked Extension. This example shows how to define a custom block-level syntax with a tokenizer and renderer.

```javascript
marked.use({
  gfm: true,
  breaks: false,
  renderer: { /* renderer overrides */ },
  tokenizer: { /* tokenizer overrides */ },
  // Custom Extensions (TokenizerAndRendererExtension[])
  extensions: [
    { name: 'myCustomSyntax', level: 'block', tokenizer: fn, renderer: fn }
  ]
});

```

--------------------------------

### Save reflinks for chunked rendering using processAllTokens and provideLexer hooks

Source: https://marked.js.org/using_pro

This example demonstrates saving reflink definitions using `processAllTokens` and then providing a custom lexer via `provideLexer` to reuse these definitions across multiple parsing calls, useful for rendering markdown in chunks.

```javascript
import { marked, Lexer } from 'marked';

let refLinks = {};

// Override function
function processAllTokens(tokens) {
  refLinks = tokens.links;
  return tokens;
}

function provideLexer(src, options) {
  return (src, options) => {
    const lexer = new Lexer(options);
    lexer.tokens.links = refLinks;
    return this.block ? lexer.lex(src) : lexer.inlineTokens(src);
  };
}

marked.use({ hooks: { processAllTokens, provideLexer } });

// Parse reflinks separately from markdown that uses them
marked.parse(`
[test]: http://example.com
`);

console.log(marked.parse(`
[test link][test]
`));
```

--------------------------------

### Override heading tokens to start at h2 with walkTokens

Source: https://marked.js.org/using_pro

Use the `walkTokens` function to modify tokens during parsing. This example increments the depth of all heading tokens, effectively making h1 headings render as h2.

```javascript
import { marked } from 'marked';

// Override function
const walkTokens = (token) => {
  if (token.type === 'heading') {
    token.depth += 1;
  }
};

marked.use({ walkTokens });

// Run marked
console.log(marked.parse('# heading 2

## heading 3'));
```

--------------------------------

### Parse Markdown with Custom Description List Extension

Source: https://marked.js.org/using_pro

Example of parsing a Markdown string that includes custom description list syntax, demonstrating the effect of the registered extensions.

```javascript
console.log(marked.parse('A Description List:\n' +
                 ':   Topic 1   :  Description 1\n' +
                 ': **Topic 2** : *Description 2*'));
```

--------------------------------

### Render Markdown on Web Page

Source: https://marked.js.org/using_advanced

This example shows how to use Marked.js to render markdown content from a textarea into a div on an HTML page. Ensure the marked.umd.js library is included.

```html
<!DOCTYPE html>
<html>
 <head>
   <!-- Suggested stylesheet -->
   <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />

   <title>Marked for the full page</title>
 </head>

 <body> 
  <textarea id="markdown-source" style="display: none;">
# Title

Lots of text using **markdown syntax.**
  </textarea>
  <div id="content" class="markdown-body"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
  <script>
    const source = document.getElementById('markdown-source').value;
    
    // Parse the markdown and render it into the content div.
    document.getElementById('content').innerHTML = marked.parse(source);
  </script>
 </body>
</html>
```

--------------------------------

### Custom Extension with Async WalkTokens

Source: https://marked.js.org/using_pro

Define custom block-level extensions and use `async: true` with `walkTokens` to process them asynchronously. This example imports content from a URL into the rendered HTML.

```javascript
const importUrl = {
  extensions: [{
    name: 'importUrl',
    level: 'block',
    start(src) { return src.indexOf('\n:'); },
    tokenizer(src) {
      const rule = /^:(https?:\/\/.+?):/;
      const match = rule.exec(src);
      if (match) {
        return {
          type: 'importUrl',
          raw: match[0],
          url: match[1],
          html: '' // will be replaced in walkTokens
        };
      }
    },
    renderer(token) {
      return token.html;
    }
  }],
  async: true, // needed to tell marked to return a promise
  async walkTokens(token) {
    if (token.type === 'importUrl') {
      const res = await fetch(token.url);
      token.html = await res.text();
    }
  }
};

marked.use(importUrl);

const markdown = `
# example.com

:https://example.com:
`;

const html = await marked.parse(markdown);
```

--------------------------------

### CLI Extension with Custom Heading IDs

Source: https://marked.js.org/using_advanced

Create a custom CLI executable for Marked.js by importing the library and extensions. This example demonstrates using `marked-custom-heading-id` to assign custom IDs to headings.

```javascript
// file: myMarked
#!/usr/bin/node

import { marked } from 'marked';
import customHeadingId from 'marked-custom-heading-id';

marked.use(customHeadingId());

import 'marked/bin/marked';

```

```bash
$ ./myMarked -s "# heading {#custom-id}"

```

```html
<h1 id="custom-id">heading</h1>

```

--------------------------------

### Set options based on front-matter using preprocess hook

Source: https://marked.js.org/using_pro

The `preprocess` hook allows modification of markdown before parsing. This example reads front-matter to dynamically set marked options like `breaks`.

```javascript
import { marked } from 'marked';
import fm from 'front-matter';

// Override function
function preprocess(markdown) {
  const { attributes, body } = fm(markdown);
  for (const prop in attributes) {
    if (prop in this.options) {
    this.options[prop] = attributes[prop];
    }
  }
  return body;
}

marked.use({ hooks: { preprocess } });

// Run marked
console.log(marked.parse(`
---
breaks: true
---

line1
line2
`.trim()));
```

--------------------------------

### Define Custom Block Tokenizer for Description Lists

Source: https://marked.js.org/using_pro

This tokenizer defines custom syntax for description lists, processing lines starting with ':'. It queues child inline tokens for further processing.

```javascript
const descriptionList = {
  name: 'descriptionList',
  level: 'block',                                     // Is this a block-level or inline-level tokenizer?
  start(src) { return src.match(/:[^:
]/)?.index; }, // Hint to Marked.js to stop and check for a match
  tokenizer(src, tokens) {
    const rule = /^(?::[^:
]+:[^:
]*(?:
|$))+/;    // Regex for the complete token, anchor to string start
    const match = rule.exec(src);
    if (match) {
      const token = {                                 // Token to generate
        type: 'descriptionList',                      // Should match "name" above
        raw: match[0],                                // Text to consume from the source
        text: match[0].trim(),                        // Additional custom properties
        tokens: []                                    // Array where child inline tokens will be generated
      };
      this.lexer.inline(token.text, token.tokens);    // Queue this data to be processed for inline tokens
      return token;
    }
  },
  renderer(token) {
    return `<dl>${this.parser.parseInline(token.tokens)}
</dl>`; // parseInline to turn child tokens into HTML
  }
};
```

--------------------------------

### Define Token Walking Function for Post-processing

Source: https://marked.js.org/using_pro

A function to perform post-processing on the generated token tree. This example appends ' walked' to the text of 'strong' tokens and re-lexes their content.

```javascript
function walkTokens(token) {
  if (token.type === 'strong') {
    token.text += ' walked';
    token.tokens = this.Lexer.lexInline(token.text)
  }
}
```

--------------------------------

### Sanitize HTML with isomorphic-dompurify using postprocess hook

Source: https://marked.js.org/using_pro

The `postprocess` hook enables modification of the final HTML output. This example uses `isomorphic-dompurify` to sanitize the generated HTML, preventing XSS attacks.

```javascript
import { marked } from 'marked';
import DOMPurify from 'isomorphic-dompurify';

// Override function
function postprocess(html) {
  return DOMPurify.sanitize(html);
}

marked.use({ hooks: { postprocess } });

// Run marked
console.log(marked.parse(`
<img src=x onerror=alert(1)//>
`));
```

--------------------------------

### Mask underline characters in Mathjax content with emStrongMask hook

Source: https://marked.js.org/using_pro

The `emStrongMask` hook is used to preprocess content before em/strong delimiters are processed. This example masks characters within Mathjax delimiters (`$`) to prevent them from being interpreted as markdown emphasis.

```javascript
import { marked } from 'marked';

// Override function
function emStrongMask(src) {
  return src.replace(/
$([^$]+)
$/g, (match) => `[${'a'.repeat(match.length - 2)}]`);
}

marked.use({ hooks: { emStrongMask } });

console.log(marked.parse(`_The formula is $a_ b=c_ d$._`));
```

--------------------------------

### Alternative using reference

Source: https://marked.js.org/using_advanced

Demonstrates setting options using `marked.use` before compiling Markdown with `marked.parse`.

```APIDOC
### Alternative using reference
```javascript
// Create reference instance
import { marked } from 'marked';

// Set options
marked.use({
  async: true,
  pedantic: false,
  gfm: true,
});

// Compile
console.log(marked.parse(markdownString));
```
```

--------------------------------

### Apply Multiple Extensions Sequentially

Source: https://marked.js.org/using_pro

Demonstrates how to apply multiple extension objects to Marked. Each subsequent call to `marked.use()` will merge or overwrite existing configurations.

```javascript
marked.use(myExtension, extension2, extension3);

\ EQUIVALENT TO:

marked.use(myExtension);
marked.use(extension2);
marked.use(extension3);

```

--------------------------------

### Configure Marked Options with `marked.use()`

Source: https://marked.js.org/using_pro

Apply basic Marked configuration options like `pedantic`, `gfm`, and `breaks` using `marked.use()`. Ensure imports are handled correctly.

```javascript
import { marked } from 'marked';

marked.use({
  pedantic: false,
  gfm: true,
  breaks: false
});

```

--------------------------------

### Build Marked

Source: https://marked.js.org/contributing

Generate es5, esm, and minified versions of the Marked library.

```bash
npm run build
content_copy
```

--------------------------------

### Run Benchmarks

Source: https://marked.js.org/contributing

Compare performance of Marked against other Markdown libraries.

```bash
npm run bench
content_copy
```

--------------------------------

### Run All Tests

Source: https://marked.js.org/contributing

Execute all test suites to ensure code quality and compliance.

```bash
npm test
content_copy
```

--------------------------------

### Run Linter

Source: https://marked.js.org/contributing

Check for and fix standardized syntax issues in the project.

```bash
npm run lint
content_copy
```

--------------------------------

### Create a New Marked Instance

Source: https://marked.js.org/using_advanced

Instantiate Marked with specific options and extensions to avoid mutating the global scope. This is useful for managing configurations in different parts of an application.

```javascript
import { Marked } from 'marked';
const marked = new Marked([options, extension, ...]);
```

--------------------------------

### Register Extensions and Walk Tokens with Marked.js

Source: https://marked.js.org/using_pro

Demonstrates how to register custom extensions and a walkTokens function with Marked.js using the `marked.use()` method. Extensions can be registered individually or together.

```javascript
marked.use({ extensions: [descriptionList, description], walkTokens });

// EQUIVALENT TO:

marked.use({ extensions: [descriptionList] });
marked.use({ extensions: [description]     });
marked.use({ walkTokens })
```

--------------------------------

### Test Linting

Source: https://marked.js.org/contributing

Verify adherence to standard syntax rules for the project.

```bash
npm run test:lint
content_copy
```

--------------------------------

### Marked Instance Creation

Source: https://marked.js.org/using_advanced

Create a new instance of Marked to ensure options and extensions are locally scoped, avoiding mutation of the global scope.

```APIDOC
## Marked instance
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.
If you don't want to mutate global scope, you can create a new instance of Marked to ensure options and extensions are locally scoped.
```javascript
import { Marked } from 'marked';
const marked = new Marked([options, extension, ...]);
```
Argument | Type | Notes  
---|---|---  
options | `object` | The same arguments that can be passed to `marked.use`  
Be careful: marked.use(...) should not be used in a loop or function. It should only be used directly after new Marked is created or marked is imported.
```

--------------------------------

### Lexer Instance and Rules

Source: https://marked.js.org/using_pro

Instantiate the Lexer to tokenize markdown and access its tokenizer rules. You can also access the globally defined block and inline rules.

```javascript
const lexer = new marked.Lexer(options);
const tokens = lexer.lex(markdown);
console.log(tokens);
console.log(lexer.tokenizer.rules.block); // block level rules used
console.log(lexer.tokenizer.rules.inline); // inline level rules used
console.log(marked.Lexer.rules.block); // all block level rules
console.log(marked.Lexer.rules.inline); // all inline level rules
```

--------------------------------

### Create New Heading Renderer in Marked.js

Source: https://marked.js.org/using_pro

Demonstrates how to add a new heading renderer using extensions without overriding the existing one. This approach is useful for adding new features or modifying behavior without affecting default parsing.

```javascript
marked.use({
 extensions: [{
    name: 'heading',
    renderer(token) {
      return /* ... */
    }
  }]
})

```

--------------------------------

### Lexer and Parser Workflow

Source: https://marked.js.org/using_pro

Tokenize a markdown string using `marked.lexer()` and then parse the resulting tokens into HTML using `marked.parser()`. This shows the typical flow of Marked.js processing.

```javascript
import { marked } from 'marked';

const md = `
  # heading

  [link][1]

  [1]: #heading "heading"
`;

const tokens = marked.lexer(md);
console.log(tokens);

const html = marked.parser(tokens);
console.log(html);
```

--------------------------------

### Configure Marked Options Globally

Source: https://marked.js.org/using_advanced

Set global parsing options for Marked using the `marked.use` method. This configuration will apply to all subsequent `marked.parse` calls unless overridden.

```javascript
// Create reference instance
import { marked } from 'marked';

// Set options
marked.use({
  async: true,
  pedantic: false,
  gfm: true,
});

// Compile
console.log(marked.parse(markdownString));
```

--------------------------------

### Direct Lexer and Parser Usage

Source: https://marked.js.org/using_pro

Access the lexer and parser directly for tokenization and HTML generation. Options passed to these functions are not merged with global options.

```javascript
const tokens = marked.lexer(markdown, options);
console.log(marked.parser(tokens, options));
```

--------------------------------

### View Compiled Rules

Source: https://marked.js.org/contributing

Display the compiled regular expressions for Markdown rules.

```bash
npm run rules
content_copy
```

--------------------------------

### View Specific Compiled Rules

Source: https://marked.js.org/contributing

Display compiled regular expressions for specified rule paths.

```bash
npm run rules -- block.gfm.item inline.pedantic.br

{
  block: {
    gfm: {
      item: /^( *)((?:[*+-]|\d{1,9}\.)) ?[^\n]*(?:\n(?!\1(?:[*+-]|\d{1,9}\.) ?)[^\n]*)*/gm
    }
  },
  inline: {
    pedantic: {
      br: /^( {2,}|\\)\n(?!\s*$)/ 
    }
  }
}
content_copy
```

--------------------------------

### Async Parsing with WalkTokens

Source: https://marked.js.org/using_pro

Use `async: true` to enable promise-based parsing. The `walkTokens` function is awaited before parsing completes, allowing asynchronous operations like fetching external resources.

```javascript
const walkTokens = async (token) => {
  if (token.type === 'link') {
    try {
      await fetch(token.href);
    } catch (ex) {
      token.title = 'invalid';
    }
  }
};

marked.use({ walkTokens, async: true });

const markdown = `
[valid link](https://example.com)

[invalid link](https://invalidurl.com)
`;

const html = await marked.parse(markdown);
```

--------------------------------

### The `parse` function

Source: https://marked.js.org/using_advanced

Use the `parse` function to convert a Markdown string into HTML. It accepts the Markdown string and an optional options object.

```APIDOC
## The `parse` function
```javascript
import { marked } from 'marked';
marked.parse(markdownString [,options])
```
Argument | Type | Notes  
---|---|---  
markdownString | `string` | String of markdown source to be compiled.  
options | `object` | Hash of options. Can also use `marked.use` to set global options
```

--------------------------------

### Hooks

Source: https://marked.js.org/using_pro

Hooks provide methods to integrate custom logic at various stages of the Marked.js parsing pipeline, including preprocessing, postprocessing, token manipulation, and lexer/parser provision.

```APIDOC
## Hooks : `hooks`

Hooks are methods that hook into some part of marked. The following hooks are available:

signature | description  
---|---
`preprocess(markdown: string): string` | Process markdown before sending it to marked.  
`postprocess(html: string): string` | Process html after marked has finished parsing.  
`processAllTokens(tokens: Token[]): Token[]` | Process all tokens before walk tokens.  
`emStrongMask(src: string): string` | Mask part of the content that should not be interpreted as Markdown em/strong delimiters.  
`provideLexer(): (src: string, options?: MarkedOptions) => Token[]` | Provide function to tokenize markdown.  
`provideParser(): (tokens: Token[], options?: MarkedOptions) => string` | Provide function to parse tokens.  

`marked.use()` can be called multiple times with different `hooks` functions. Each function will be called in order, starting with the function that was assigned _last_.

**Example:** Set options based on front-matter
```javascript
import { marked } from 'marked';
import fm from 'front-matter';

// Override function
function preprocess(markdown) {
  const { attributes, body } = fm(markdown);
  for (const prop in attributes) {
    if (prop in this.options) {
    this.options[prop] = attributes[prop];
    }
  }
  return body;
}

marked.use({ hooks: { preprocess } });

// Run marked
console.log(marked.parse(`
---
breaks: true
---

line1
line2
`.trim()));
```

**Output:**
```html
<p>line1<br>line2</p>
```

**Example:** Sanitize HTML with isomorphic-dompurify
```javascript
import { marked } from 'marked';
import DOMPurify from 'isomorphic-dompurify';

// Override function
function postprocess(html) {
  return DOMPurify.sanitize(html);
}

marked.use({ hooks: { postprocess } });

// Run marked
console.log(marked.parse(`
<img src=x onerror=alert(1)//>
`));
```

**Output:**
```html
<img src="x">
```

**Example:** Save reflinks for chunked rendering
```javascript
import { marked, Lexer } from 'marked';

let refLinks = {};

// Override function
function processAllTokens(tokens) {
  refLinks = tokens.links;
  return tokens;
}

function provideLexer(src, options) {
  return (src, options) => {
    const lexer = new Lexer(options);
    lexer.tokens.links = refLinks;
    return this.block ? lexer.lex(src) : lexer.inlineTokens(src);
  };
}

marked.use({ hooks: { processAllTokens, provideLexer } });

// Parse reflinks separately from markdown that uses them
marked.parse(`
[test]: http://example.com
`);

console.log(marked.parse(`
[test link][test]
`));
```

**Output:**
```html
<p><a href="http://example.com">test link</a></p>
```

**Example:** Mask underline characters inside Mathjax content delimited by `$`
```javascript
import { marked } from 'marked';

// Override function
function emStrongMask(src) {
  return src.replace(/\$([^$]+)\$/g, (match) => `[${'a'.repeat(match.length - 2)}]`);
}

marked.use({ hooks: { emStrongMask } });

console.log(marked.parse(`_The formula is $a_ b=c_ d$_`));
```

**Output:**
```html
<p><em>The formula is $a_ b=c_ d$.</em></p>
```
```

--------------------------------

### Parse Markdown String with Marked

Source: https://marked.js.org/using_advanced

Use the `marked.parse` function to convert a Markdown string into HTML. Options can be passed directly or set globally using `marked.use`.

```javascript
import { marked } from 'marked';
marked.parse(markdownString [,options])
```

--------------------------------

### Sanitize HTML Output with DOMPurify

Source: https://marked.js.org/

When processing potentially unsafe strings, it's crucial to sanitize the output HTML to prevent XSS attacks. DOMPurify is a recommended library for this purpose.

```javascript
DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not happening')">`));
```

--------------------------------

### Define Custom Inline Tokenizer for Description Terms/Details

Source: https://marked.js.org/using_pro

This tokenizer defines inline syntax for description terms (dt) and details (dd) within a description list. It parses and prepares child inline tokens.

```javascript
const description = {
  name: 'description',
  level: 'inline',                                 // Is this a block-level or inline-level tokenizer?
  start(src) { return src.match(/:/)?.index; },    // Hint to Marked.js to stop and check for a match
  tokenizer(src, tokens) {
    const rule = /^:([^:
]+):([^:
]*)(?:
|$)/;  // Regex for the complete token, anchor to string start
    const match = rule.exec(src);
    if (match) {
      return {                                         // Token to generate
        type: 'description',                           // Should match "name" above
        raw: match[0],                                 // Text to consume from the source
        dt: this.lexer.inlineTokens(match[1].trim()),  // Additional custom properties, including
        dd: this.lexer.inlineTokens(match[2].trim())   //   any further-nested inline tokens
      };
    }
  },
  renderer(token) {
    return `
<dt>${this.parser.parseInline(token.dt)}</dt><dd>${this.parser.parseInline(token.dd)}</dd>`;
  },
  childTokens: ['dt', 'dd'],                 // Any child tokens to be visited by walkTokens
};
```

--------------------------------

### Web Worker for Markdown Parsing

Source: https://marked.js.org/using_advanced

This Web Worker handles Markdown parsing in a browser environment. It imports the Marked.js library and uses `postMessage` to communicate results. Remember that Web Workers send payloads within an object's `.data` property.

```javascript
// markedWorker.js

importScripts('path/to/marked.umd.js');

onmessage = (e) => {
  const markdownString = e.data
  postMessage(marked.parse(markdownString));
};

```

```javascript
// script.js

const markedWorker = new Worker('./markedWorker.js');

const markedTimeout = setTimeout(() => {
  markedWorker.terminate();
  throw new Error('Marked took too long!');
}, timeoutLimit);

markedWorker.onmessage = (e) => {
  clearTimeout(markedTimeout);
  const html = e.data;
  console.log(html);
  markedWorker.terminate();
};

markedWorker.postMessage(markdownString);

```

--------------------------------

### Parse Inline Markdown

Source: https://marked.js.org/using_advanced

Use `marked.parseInline` to render markdown strings that do not require paragraph tags. `marked.parse` will wrap the output in paragraph tags.

```javascript
const blockHtml = marked.parse('**strong** _em_');
console.log(blockHtml); // '<p><strong>strong</strong> <em>em</em></p>'

const inlineHtml = marked.parseInline('**strong** _em_');
console.log(inlineHtml); // '<strong>strong</strong> <em>em</em>'
```

--------------------------------

### Node Worker Thread for Markdown Parsing

Source: https://marked.js.org/using_advanced

Use this worker thread to parse Markdown asynchronously in a Node.js environment. It receives Markdown strings and posts back HTML. Ensure a timeout is implemented to prevent infinite hangs.

```javascript
// markedWorker.js

import { marked } from 'marked';
import { parentPort } from 'worker_threads';

parentPort.on('message', (markdownString) => {
  parentPort.postMessage(marked.parse(markdownString));
});

```

```javascript
// index.js

import { Worker } from 'worker_threads';
const markedWorker = new Worker('./markedWorker.js');

const markedTimeout = setTimeout(() => {
  markedWorker.terminate();
  throw new Error('Marked took too long!');
}, timeoutLimit);

markedWorker.on('message', (html) => {
  clearTimeout(markedTimeout);
  console.log(html);
  markedWorker.terminate();
});

markedWorker.postMessage(markdownString);

```

--------------------------------

### Override Heading Token Rendering in Marked.js

Source: https://marked.js.org/using_pro

Customize the HTML output for heading tokens to include anchor tags, similar to GitHub's markdown. This is useful for creating navigable documents.

```javascript
import { marked } from 'marked';

const renderer = {
  heading({ tokens, depth }) {
    const text = this.parser.parseInline(tokens);
    const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');

    return `
            <h${depth}>
              <a name="${escapedText}" class="anchor" href="#${escapedText}">
                <span class="header-link"></span>
              </a>
              ${text}
            </h${depth}>`;
  }
};

marked.use({ renderer });

console.log(marked.parse('# heading+'));

```

--------------------------------

### Override Codespan Tokenizer for LaTeX in Marked.js

Source: https://marked.js.org/using_pro

Customize the tokenizer for codespan tokens to recognize and process LaTeX-formatted strings. This allows for custom handling of inline code that might contain special characters or syntax.

```javascript
import { marked } from 'marked';

const tokenizer = {
  codespan(src) {
    const match = src.match(/^\$+([^\$\n]+?)\$+/);
    if (match) {
      return {
        type: 'codespan',
        raw: match[0],
        text: match[1].trim()
      };
    }

    // return false to use original codespan tokenizer
    return false;
  }
};

marked.use({ tokenizer });

console.log(marked.parse('$ latex code $

` other code `'));

```

--------------------------------

### Walk Tokens

Source: https://marked.js.org/using_pro

The walkTokens function allows you to intercept and modify tokens during the parsing process. Child tokens are processed before sibling tokens, and modifications are persisted.

```APIDOC
## Walk Tokens : `walkTokens`

The walkTokens function gets called with every token. Child tokens are called before moving on to sibling tokens. Each token is passed by reference so updates are persisted when passed to the parser. When `async` mode is enabled, the return value is awaited. Otherwise the return value is ignored.
`marked.use()` can be called multiple times with different `walkTokens` functions. Each function will be called in order, starting with the function that was assigned _last_.

**Example:** Overriding heading tokens to start at h2.
```javascript
import { marked } from 'marked';

// Override function
const walkTokens = (token) => {
  if (token.type === 'heading') {
    token.depth += 1;
  }
};

marked.use({ walkTokens });

// Run marked
console.log(marked.parse('# heading 2\n\n## heading 3'));
```

**Output:**
```html
<h2 id="heading-2">heading 2</h2>
<h3 id="heading-3">heading 3</h3>
```
```

--------------------------------

### Remove Zero-Width Characters Before Parsing

Source: https://marked.js.org/

Certain zero-width Unicode characters, like \uFEFF, can interfere with markdown parsing. This snippet shows how to remove them from the beginning of the content.

```javascript
// remove the most common zerowidth characters from the start of the file
marked.parse(
  contents.replace(/^[‌‍‎‏]/,"")
)
```
Tokens:
Raw