Login/Register
How to use npm Marked with HighlightJS
Asked Answered
Solved javascriptreadmejavascript-markedhighlightjs
T

1

10

How do you use npm Marked with HighlightJS? I'm trying to automate my docs to be parsed and styled. Looking at the following example from marked docs:

// Using async version of marked
marked(markdownString, function (err, content) {
  if (err) throw err;
  // console.log(content);
});

// Synchronous highlighting with highlight.js
marked.setOptions({
  highlight: function (code) {
    return require('highlight.js').highlightAuto(code).value;
  }
});

console.log(marked(markdownString));

I don't see how to use a README.md file instead of a string with manually escaped special characters. The usage examples don't involve any references to a .md document as input for the markdownString.

How can i pass the markdown string as a document (like form a file called README.md) instead of a manually escaped string and also have the final output include the styling?

The goal is to be able to pass in a linted (I'm using VS code markdownlint) README.md, the main document CSS and or highlightJS css and have the return value of the last line (marked(markdownString)) be something i can write directly to a .html file.

Another note if it matters: My markdown files also specify the the language in multi-line code blocks. For example a multi-line block of JSON in my README.md looks like this:

**BODY**:  

```JSON
{
  "username": "[email protected]",
  "p2setting": "4xx72"
}
```
Telfer answered 17/2, 2018 at 17:11 Comment(0)
T
13

Based on this post, the docs once specified the following but its been removed from the docs:

var fs     = require('fs');
var hljs   = require('highlight.js');
var marked = require('marked');

var markdownString = fs.readFileSync('./README.md');

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlight(lang, code).value;
  }
});

var output = marked(markdownString);

Note you need to specify the encoding fs.readFileSync('./README.md', "utf8").

A working example is:

const fs     = require('fs');
const hljs   = require('highlight.js');
const marked = require('marked');

const markdownString = fs.readFileSync('./README.md', "utf8");

const style1 = fs.readFileSync('./node_modules/highlight.js/styles/railscasts.css', "utf8");
// const style1 = fs.readFileSync('./node_modules/highlight.js/styles/solarized-dark.css', "utf8");

marked.setOptions({
  highlight: function(code) {
    return hljs.highlightAuto(code).value;
  }
});

const doc = `<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Marked</title>
  <style>${style1}</style>
  </head>
  <body>${marked(markdownString)}</body>
</html>  
`
fs.writeFileSync('./index.html',  doc);
Telfer answered 17/2, 2018 at 18:37 Comment(2)
when using code block, if no language is selected it throws an error Error: Unknown language: "" – Scammony
For newer version of highlight.js, return hljs.highlight(lang, code).value; should be return hljs.highlight(code,{ language: lang }).value; – Hugues

© 2022 - 2024 — McMap. All rights reserved.