Home

Awesome

sublime-markdown-extended package control total downloads

Extends Soda's Monokai and the default markdown styles with additional syntax highlighting for YAML Front Matter, GitHub Flavored Markdown (GFM) and language-specific syntax highlighting inside GFM "fenced" code blocks

Although substantial changes have been made, thank you @aziz and other contributors to Knockdown, for the code for the fenced code blocks.

Get Monokai Extended for better highlighting.

Jump to Examples ↓

Getting Started

1. Installation

Package Control

If you already have Package Control installed in Sublime Text:

Manual Installation

Go to Preferences -> Browse Packages, and then either download and unzip this plugin into that directory, or:

git clone https://github.com/jonschlinkert/sublime-markdown-extended.git "sublime-markdown-extended"

2. Activate this Language

After installing this package, open a markdown file and switch the language to Markdown Extended, using one of the following methods:

3. Make "Markdown Extended" the default

To make Markdown Extended the default highlighting for the current extension:

  1. Open a file with the extension you want to set a default for (i.e. .md)
  2. Navigate through the following menus in Sublime Text: View -> Syntax -> Open all with current extension as... -> Markdown Extended
<!-- **Handlebars version** Included in this package is a file named `Markdown Extended.tmLanguage-handlebars`, which provides additional syntax highlighting for Handlebars syntax inside markdown files. If you use [assemble](http://assemble.io) for generating documentation, sites or components, then activate the Handlebars version instead. To do so, first delete `Markdown Extended.tmLanguage`, then renamed the extension of `Markdown Extended.tmLanguage-handlebars` to just `.tmLanguage`. -->

Features:

Markdown Enhancements

The following examples use the Monokai Extended theme.

Whitespace

Significant whitespace

Whitespace is significant only directly before and directly after fenced code blocks! Following these instructions will ensure that highlighting works properly and consistently._

This is very simple:

If you don't, it won't break your code but it won't always look awesome.

Comparisons with and without proper whitespace

Whitespace before the block

You will need to keep a space above and below fenced code blocks for predictable results with syntax highlighting. For example, this is what it looks like when there is no space before a fenced code block:

image

This is what it looks like with proper spacing:

image

Whitespace after the block

Also add a new line after code blocks, but make sure that there is no trailing whitespace next to the bottom fence.

With a trailing whitespace

image

Without a trailing whitespace

image

Supported languages

The following languages are highlighted inside fenced code blocks:

Note that in order for a language to be highlighted properly, you must have the language installed in Sublime Text.

CSS

Before

image

After

image

LESS

Before

image

After

image

HTML

Before

image

After

image

JavaScript

Before

image

After

image

Coffee

Before

image

After

image

LiveScript

Before

image

After

image

Shell

Before

image

After

image

YAML Front Matter

See gray-matter

Before

image

After

image

Coffee Front Matter

See gray-matter

Before

image

After

image

Authors

Jon Schlinkert

Alexander Krivoshhekov

Copyright and license

Copyright 2013-2015 Jon Schlinkert

MIT License