How to use npm Marked with HighlightJS

Question

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": "example@example.com",
  "p2setting": "4xx72"
}
```

jtlindsey · Accepted Answer · 2018-02-17T19:08:43.807

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);

How to use npm Marked with HighlightJS

1 Answers1