Marked Help

For Programmers

Syntax Highlighting

Syntax highlighting can be enabled in the Style preferences. It will recognize code blocks, detect the language and render color-coded output in the preview. There are multiple themes available, selected by the dropdown below the option in preferences. The selected theme will apply to all documents.

Marked uses highlight.js to provide consistent color coding for all types of embedded code, including standard Markdown syntaxes that don’t allow language to be specified. Highlight.js autodetects quite well. There are some minor rendering differences between it and colorizers such as Pygments (GitHub style), but the output is quite similar. Using the github.css theme on Ruby code, for example, renders almost the exact output you’d see on GitHub1.

Syntax highlighting will show up in the preview and in print and PDF export. If enabled in preferences and the theme is included when exporting HTML, the highlight.js library used by Marked will be embedded in the HTML output, allowing your exported HTML to appear as it does in Marked.

Github-style line breaks

Marked can preserve line breaks in your paragraphs. Just select Behavior in Preferences and check the box to retain line breaks in paragraphs.

Fenced code blocks

If enabled in the Behavior preferences, fenced code blocks in your document will be rendered. Fenced code blocks are delimited by three or more tildes (~) or backticks (`). You can use more than three, but the beginning and ending delimiters must have exactly the same number of characters.

~~~
Some code to be rendered as a pre/code block
~~~

Languages may be specified using the language title (or short title) after the delimiter in the first line, or in curly brackets (with or without a leading period) after the last delimeter. For example:

~~~~~ruby
some ruby code
~~~~~

Or:

`````
some Java code
`````{.java}

The built in syntax highlighting will recognize 41 different language specifiers. If there is no language specified, it will detect it automatically, so it’s not required for the preview. The language string given will be output in the final html as a class on the <code> tag.

See the section on Marked Special Syntax to learn how to include external code files in your document.

  1. The GitHub stylesheet provides backup styles for blocks actually rendered with Pygments. If the <pre> tag is inside a div with the class “highlight”, it will display using the standard GitHub styling, not Marked’s. You can render the code externally and paste HTML, or use pygmentize to render it to html files and include them with the <<(source.html) syntax.↩

top