node package manager


Markdown parser with support for syntax highlighting

Punch Markdown + Highlight

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

npm install punch-markdown-highlight

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.

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:


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.

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"Couriermonospace;
code {
  white-space: pre;
  color: rgba(0,0,01);
  .keyword         { font-weight: bold; color: #6089d4; }
  .string.regexp { color: green }
  .class.special { color: #6089d4 }
  .number          { color: red }
  .comment         { color: grey }