Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

metalsmith-code-highlight

build status codecov Greenkeeper badge

Finds content with <code> elements and highlights it using HighlightJS.

Example

Input:

<p>Hello there.</p>
<p>
  Inline <code class=lang-js>document.all</code>
</p>
<pre>
  <code class=lang-coffeescript>
    require "fs"
    console.log fs.readFileSync "/etc/passwd"'
  </code>
</pre>

Output:

<p>Hello there.</p>
<p class="lang-highlight">
  Inline <code class="lang-js hljs javascript"><span class="hljs-built_in">document</span>.all</code>
</p>
<pre class="lang-highlight">
  <code class="lang-coffeescript hljs">
    <span class="hljs-built_in">require</span> <span class="hljs-string">"fs"</span>
    <span class="hljs-built_in">console</span>.log fs.readFileSync <span class="hljs-string">"/etc/passwd"</span><span class="hljs-string">'</span>
  </code>
</pre>

Configuration

Supports the Highlight.js options (e.g. classPrefix, languages, tabReplace).

If you'd like to turn off automatic language detection, set {languages: []}. Only code blocks marked with an appropriate class like lang-js will be highlighted (useful when using fenced code blocks in Markdown).

By default, this plugin will highlight all code elements. You can override the selector for what to highlight by passing in a selector option like so: {selector: 'pre > code'}. This will only highlight <pre>'s immediate <code> children elements. This is a metalsmith-code-highlight specific option—it isn't part of highlight.js.

Using with metalsmith-dom-transform

If you're already using metalsmith-dom-transform, you can save a little bit of overhead by accessing the code highlight transform directly:

const domTransform = require('metalsmith-dom-transform');
const codeHighlightTransform = require('metalsmith-code-highlight/transform');

metalsmith.use(domTransform({
  transforms: [
    codeHighlightTransform(options),
    // Your other transforms go here
  ]
}));

Changelog

  • 1.1.0: Allow a selector option for overriding the default selector of code.
  • 1.0.3: Upgrade to metalsmith-dom-transform 2.0.0, no functional changes
  • 1.0.2: Upgrade to metalsmith-dom-transform 1.0.1, may cause slight change in HTML output when there is no content to highlight
  • 1.0.1: Use highlightBlock from highlight.js for the highlighting, slight change in HTML output
  • 1.0.0: Upgrade to metalsmith-dom-transform 1.0.0 (API change)
  • 0.1.1: Upgrade dependencies
  • 0.1.0: Expose transform for use with metalsmith-dom-transform

Alternatives

About

Metalsmith plugin for syntax highlighting code with HTML

Topics

Resources

License

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.