Link Search Menu Expand Document

Markdown

  • Notice: all references of MPE in this guide is in reference to Dendron Markdown Preview Enhanced, the default markdown renderer of Dendron

Markdown Basics

This article is a brief introduction to GitHub Flavored Markdown writing.

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Syntax guide

Headers

# This is an <h1> tag

## This is an <h2> tag

### This is an <h3> tag

#### This is an <h4> tag

##### This is an <h5> tag

###### This is an <h6> tag

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

~~This text will be strikethrough~~

Lists

Unordered List

- Item 1
- Item 2
  - Item 2a
  - Item 2b

Ordered List

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

Definition List

Item 1
: Definition for Item 1

Item 2
~ Definition for Item 2
~ Another definition for Item 2, with a [link](http://www.example.com)

Images

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)
https://github.com - automatic!
[GitHub](https://github.com)

Blockquote

As Kanye West said:

> We're living the future so
> the present is our past.

Horizontal Rule

Three or more...

---

Hyphens

---

Asterisks

---

Underscores

Inline code

I think you should use an
`<addr>` element here instead.

Fenced code block

You can create fenced code blocks by placing triple backticks ``` before and after the code block.

Syntax Highlighting

You can add an optional language identifier to enable syntax highlighting in your fenced code block.

For example, to syntax highlight Ruby code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Task lists

- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Extended Syntax

These are non-standard markdown syntax used in Dendron. Everything here is both available in Dendron's preview as well as when publishing.

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

You can create a table from existing content using > Markdown Shortcuts: Add Table command.

Abbreviation

The HTML specification

_[HTML]: Hyper Text Markup Language
_[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.

Footnotes

Content [^1]

[^1]: Hi! This is a footnote

Frontmatter Variable Substitution

You can use variables defined in your note frontmatter inside your note. The syntax is {{fm.VAR_NAME}} where VAR_NAME is the name of your variable. The fm designates that you want to use a frontmatter variable.

Nunjuck Templates

  • status: EXPERIMENTAL

You can use a limited set of nunjucks to customize your notes.

To enable, you can set the following to true inside your dendron.yml.

useNunjucks: true

Once enabled, you'll have access to nunjucks specific constructs. You'll have the same variables available as during frontmatter variable substitution. Nunjucks templates also get access to the fname builtin variable which will be substituted with the filename of the current note.

Below is an example of what you can do with nunjucks.

  • Raw Markdown
## Variables

- special variables: {{fname}}
- special variable as link: [[{{fname}}]]
- special variable as note ref: ![[{{fname}}#footer]]

## Loops

{% for item in fm.alist %}

- Item: {{item}}
  {% endfor %}

## Footer

This is some footer content
  • Compiled nunjucks example

Nunjucks will work for both the preview and for publishing. It is still an experimental feature which means it might change in backwards in-compatible ways at any point.

It currently also has the following limitations:

  • disables live preview of markdown (you'll need to refresh the markdown to see changes)
  • will throw an error if you currently have nunjucks like strings inside your notes eg. {% %}
  • will throw errors if you refer to an undefined variable {{ foo }}

Diagrams

Dendron lets you create Diagrams using mermaid Create a code block with mermaid support to use mermaid. The following block turns into the diagram below.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
graph TD; A-->B; A-->C; B-->D; C-->D;

VSCode Specific Commands

Markdown Smart Select

This allows you to expand and shrink selections of markdown using a keyboard shortcut.

  • Expand: โŒƒโ‡งโŒ˜โ†’
  • Shrink: โŒƒโ‡งโŒ˜โ†

Selection applies to the following, and follows a traditional hierarchical pattern:

  • Headers
  • Lists
  • Block quotes
  • Fenced code blocks
  • Html code blocks
  • Paragraphs

preview

Image by Microsoft

Compatibility with CommonMark

CommonMark is a strongly defined, highly compatible specification of Markdown

When possible, Dendron will try to stay to CommonMark spec for syntax. That being said, many of the features we have (eg. block based note references) have no common mark equivalent which is why we've had to invent new syntax.

You can use the markdown pod to migrate both individual notes and your entire vault to a CommonMark compatible format.

Other Resources

References

The content of this page is derived from the following sources:

  1. markdown preview enhanced docs published under the University of Illinois/NCSA Open Source License
  2. markdown shortcuts docs published under the MIT License