Skip to content

markdown parser with code highlighting and math latex support

License

Notifications You must be signed in to change notification settings

acyortjs/markdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Markdown

Build Status codecov

markdown parser with code highlighting and math latex support

DEMO

Install

$ npm i @acyort/markdown -S

Usage

basic

const Marked = require('@acyort/markdown')

const config = {
  lineNumbers: true,      // if show code line numbers
  getHeadingId: fn        // for set heading id
}

const marker = new Marked(config)

// parse option, this will override initial option
const option = {
  lineNumbers: true,
  getHeadingId: fn
}

// parse markdown string
marker.render('# H1')

// width option
marker.render('# H1', option)

marker.render('# An h1 header')
// <h1>
//   <a href="#An h1 header" id="An h1 header"></a>
//   An h1 header
// </h1>

const slugify = require('@sindresorhus/slugify')
const option = { getHeadingId: slugify }
marker.render('# I ♥ Dogs', options)
// <h1>
//   <a href="#i-love-dogs" id="i-love-dogs"></a>
//   An h1 header
// </h1>

const code = '\`\`\`html\n<h1>h1</h1>\n\`\`\`'
marker.render(code)
// <div class="code-highlight">
//   <table>
//     <tbody>
//       <tr>
//         <td class="code-highlight-line"><pre class="language-none">
//   <code class="language-none"><span>1</span>
// </code>
// </pre></td>
//         <td class="code-highlight-code"><pre class="language-html">
//   <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>h1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span></code>
// </pre></td>
//       </tr>
//     </tbody>
//   </table>
// </div>
<!-- add prism css -->
<link rel="stylesheet" href="https://cdn.staticfile.org/prism/1.16.0/themes/prism.min.css" />

Marked lexer API

lexer

const { lexer } = require('@acyort/markdown')

math latex

const text = '实例:$$f(x)=x$$'
marker.render(text)
/*
<p>实例:</p><div style="text-align:center"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="application/x-tex">f(x)=x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathdefault" style="margin-right:0.10764em;">f</span><span class="mopen">(</span><span class="mord mathdefault">x</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.43056em;vertical-align:0em;"></span><span class="mord mathdefault">x</span></span></span></span></div>
*/
<!-- add katex css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

About

markdown parser with code highlighting and math latex support

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published