Markdown Snippets

As of SnippetsLab 1.5, you can show the rendered HTML document of your markdown snippets.

Edit and Preview Markdown Snippets

Toggle Markdown Preview

There are three ways to turn markdown preview on/off:

  • Choose View > Markdown Preview Mode from the menubar
  • Click btn-preview button on the top right while editing a markdown snippet
  • Press the keyboard shortcut Shift-Command-M

Insert Code Block

The markdown preview mode can highlight all the languages that SnippetsLab supports in a regular snippet. However, you may have to provide a hint of what type of language the code block is before it can be correctly highlighted. To specify a language type (with fenced code block style), just type the language alias after the opening back-ticks. For example:

```ruby
def robot_invasion
    puts("robot " * 1000)
end
```

_images/markdown.png

For some languages, you may find it hard to “guess” the right alias to use. In this case, you can insert the code block by right clicking on the editor and choose Insert Markdown Code Block > (A Language of Your Choice) to let SnippetsLab complete it for you. If the language you want is not included in the menu, you have to enable it in the preferences window. For details, see Active Languages.

Note

While both the fenced style and indented style of code blocks are supported by SnippetsLab, you can only specify a language name with the fenced code block style.

Insert Table of Contents

SnippetsLab can automatically generate a Table of Contents from the markdown snippet and add it into the resulting HTML document. To use this feature, you must explicitly include [TOC] in your markdown snippet. Although technically this marker can be placed anywhere, it’s strongly recommended that it be put in the beginning of the markdown snippet.

_images/toc.png

Important

The marker is case-sensitive, so [toc] will not work in this case.

Insert Math (MathJax Support)

SnippetsLab 1.7 introduces MathJax support which enables users to preview math formulas written in LaTeX.

To include inline formulas, use $..$ or \\(..\\) as the delimiters. To include multiline formulas, use $$..$$ or \\[..\\] as the delimiters. The following image shows a sample markdown snippet with some math and how it is rendered in preview mode:

_images/latex.png

SnippetsLab uses MathJax under the hood, so syntax may be different from popular TeX builds. For details, please refer to the offical support page of MathJax: http://docs.mathjax.org/en/latest/tex.html

Important

For compatibility reasons, there must be NO SPACES immediately next to the $ inline delimiters. For example, $x$ will work while $ x $ will not (in this case the dollar sign will be treated as a normal character).

Markdown Themes

Choose SnippetsLab > Preferences… from the menubar, switch to Themes tab and click on Markdown to choose and customize your markdown theme. Markdown themes are virtually CSS stylesheets that are applied to the rendered HTML document. There are four pre-installed themes: Bootstrap 3, GitHub, Minimalized and Vector.

  • Edit a theme: Click on the theme you want to edit and edit it directly in the code editor (you can also use your favourite text editor to edit the CSS code and paste the code back into the editor). Changes are reflected in real time. When finished, click the Apply button to apply your changes. You can also click the Revert button to undo all the changes.
  • Add or remove a theme: Click btn-add button to add a new theme. Click btn-remove button to delete the selected theme.
  • Reset all themes: Click btn-action button and choose Reset All… to reset all themes. This will delete all your custom themes and restore pre-installed themes.
  • Import or export a theme: Click btn-action button and choose Import or Export. Themes can be exported as and import from a CSS stylesheet.

Tip

The syntax highlighting styles for code blocks will automatically be applied by SnippetsLab on top of the selected markdown theme.