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 well. There are some minor rendering differences between it and colorizers such as Pygments (GitHub style), but the output is similar. Using the github.css theme on Ruby code, for example, renders almost the exact output you’d see on GitHub.
The GitHub stylesheet provides backup styles for blocks 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 usepygmentizeto render it to html files and include them with the<<(source.html)syntax.
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 the 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
~~~~~
Will render as:
<pre><code class="ruby">some ruby code</code></pre>
Or with backticks:
`````
some Java code
`````{.java}
Marked can detect both Markdown Extra/Python Markdown ({.lang} after closing fence) and Discount (lang after first fence) language specifications. The following (Discount format) would create the same result as the above (Python Markdown format):
`````java
some Java code
`````
Marked also handles indented fenced code blocks so you can use them within nested lists.
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.
GitHub checkboxes
List items formatted as:
- [ ] Unfinished task
- [x] Finished task
will appear in the preview as rendered checkbox items. They cannot be interacted with, but their state will reflect any changes in the source document.