compose-code-highlighter
v1.0.1
Published
Highlight static code snippets with CodeMirror
Downloads
7
Readme
Compose Code Highlighter
Easily highlight static code snippets using the wonderful CodeMirror. This wraps the CodeMirror run mode feature and adds language aliases, and DOM interaction.
Setup:
When requiring this module, be sure to also require the CodeMirror language modes for the languages you'll be working with. For example if you are going to use Ruby, C, and CSS, you might add this:
require('codemirror')
require('codemirror/mode/ruby/ruby')
require('codemirror/mode/clike/clike')
require('codemirror/mode/css/css')
See CodeMirror's mode documentation for a complete list of supported languages.
Usage
Code snippets can be any element (not just a <pre>
block) but should either have a
data-lang
attribute to set the language or should have a classname matching matching lang-[language]
.
For example:
<pre data-lang='css'>
body {
background: #c0ffee;
}
</pre>
<div class='lang-ruby'>
puts 'hello world'
</div>
Then to highlight all code snippets on the page:
Highlighter.highlight()
Alias languages
If your language doesn't seem to be highlighting properly, you can specify
the mimetype that CodeMirror is using to identify your language. For Scss, you'd use data-lang="text/x-scss"
. That's kind of verbose so this library adds some aliases so you can go on using data-lang="scss"
and it is converted before invoking CodeMirror.
aliases: {
'bash' : 'text/x-sh',
'c' : 'text/x-csrc',
'html' : 'text/html',
'js' : 'text/javascript',
'json' : 'application/json',
'java' : 'text/x-java',
'markup': 'text/html',
'sass' : 'text/x-sass',
'scss' : 'text/x-scss',
'sh' : 'text/x-sh'
},
If you want to add aliases you can do so like this:
var Highlighter = require('compose-code-highlighter')
Highlighter.addAlias({
'less': 'text/x-less'
})
I'm happy to accept pullrequests for adding aliases to the default list.