Add syntax highlighting in your Punch contents
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
helpers.js
highlight.js
index.js
package.json
parser.js

README.md

Punch Markdown + Highlight

This is a plugin for Punch, bringing syntax highlighting along Markdown parser.

Installation

npm install punch-markdown-highlight

Usage

Parser

In your config.json:

{
	"plugins": {
		"parsers": {
			".md": "punch-markdown-highlight/parser",
			".markdown": "punch-markdown-highlight/parser"
		}
	}
}

You can then use the three-backticks syntax (GitHub-like), and enjoy syntax highlighting, in all your Markdown contents.

Helper

Whenever you would need to use the same feature in your templates, there is a bundler helper. Add this in your config.json:

{
  "plugins": {
    "helpers": {
      "markdown_highlight": "punch-markdown-highlight/helpers"
    }
  }
}

You'll then be able to use the helper "highlight", this way:

<pre>
{{#highlight}}javascript
alert('hello');
{{/highlight}}
</pre>

As you can't pass arguments to helpers, you'll have to provide the language as first part of the text, followed by a newline.

CSS

Highlighter will only wrap tokens in specific classes, you have to add some CSS to your bundles.

pre {
  border: 1px solid #e0ded3;
  border-radius: 4px;
  margin: 10px 10px 40px 10px;
  padding: 10px;
  background-color: #f0efe8;
  overflow: auto;
  font-size: 14px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code {
  white-space: pre;
  color: rgba(0,0,0, 1);
  .keyword         { font-weight: bold; color: #6089d4; }
  .string, .regexp { color: green }
  .class, .special { color: #6089d4 }
  .number          { color: red }
  .comment         { color: grey }
}