Home

Appendix

Application Icon   Markdown Documents

Markdown is a simple formatting language invented by John Gruber that has gained in popularity over the past few years. It allows you to write in plain text, using some easily learned control characters, to produce nicely rendered HTML output. With some styling and ingenuity, you can create a wide variety of documents.

Markdown files can be imported or created via Data > New > Markdown text.

Editing: Writing Markdown is essentially the same as writing plain text documents. As you're writing you can switch easily between a plain text editor and the rendered view or even view both simultaneously using the side-by-side view via the View > Document Display commands.

When editing the source of the Markdown, DEVONthink's hybrid source rendering will display many types of formatting or elements as you type. For example, typing **important** will display the plain text in bold; `{"name":"Audrey Hepburn"}` will display as a code block, etc. If you'd prefer to see no formatting in the source code, you can disable WYSIWYG editing in Preferences > Files > Markdown.

The currently supported WYSIWYG types, including CriticMarkup syntax, are:

Formatting:

  • Icon
    Bold: **bold**.
  • Icon
    Italic: *italic* or _italic_.
  • Icon
    Bold-Italic: ***bold-italic***.
  • Icon
    Highlight: {==highlight==}.
  • Icon
    Underscore: {++underscore++}.
  • Icon
    Strikethrough: {--strikethrough--}.
  • Icon
    Subscript: ~subscript~.
  • Icon
    Superscript: ^superscript^.

Elements:

  • Icon
    Header: # Header. Prefix each header with the appropriate number of pound signs. Supports header levels 1 through 6.
  • Icon
    Link: [Link Text](URL) or <URL>.
  • Icon
    Blockquote: > preceding each line in the quote.
  • Icon
    Code block: `code terms`. Note: Those are backticks, found on the tilde (~) key.
  • Icon
    Fenced code block: ``` - triple backticks on a line above and below the code. To show syntax coloring in the rendered view, see the Markdown Extensions: Prism subsection below.
  • Icon
    Metadata headers: attribute: . As noted below, these must be the first lines in the document.

File Transclusion: A special feature of DEVONthink's Markdown handling is support for file transclusion. This provides the capability of displaying the contents of one file inside the contents of a Markdown file. This supports displaying the contents of: plain text, rich text, HTML, formatted notes, sheet, or more commonly, other Markdown files. For example, you may have several chapters of a book written in individual Markdown files. Use transclusion to view them all as one document with out the need to merge or copy and paste the content between files, similar to some popular writing applications.

To use transclusion, just enter the desired document's name or item link between double braces, e.g., {{Chapter 1}}. Transclusion supports filenames with and without extensions, relative and absolute links, as well as item links. It also supports the Obsidian syntax, e.g., ![[Chapter 2.md]].

Styling: Styling your Markdown documents can be done with internal styling or externally referenced stylesheets. If you have a specific stylesheet you'd like to use globally, you can specify one in Preferences > Files > Style Sheet.. Here are the options:

  • Icon
    Internal styling: <style type="text/css"> … </style>
  • Icon
    HTML Link: <link rel="stylesheet" type="text/css" href="css/styles.css" />
  • Icon
    XHTML Link: CSS: css/styles.css. XHTML headers must be placed at the very top of the document.

Note: If no specific styling is applied, the font choice in Preferences > Editing > Rich Text & Note Font will be used when previewing Markdown documents.

Linking: You can reference local images, scripts, and other resources using item links, downward-relative (traveling subgroups; it's not possible to travel up with '..' as documents can have multiple parents) or absolute (start with a forward slash) paths. Here are examples of linking an image:

  • Icon
    ![link](item.png): Use this when linking to an item in the same group as the Markdown document.
  • Icon
    ![link](group/item.png): Use this when linking to an item in a sub-group of the group containing the Markdown document.
  • Icon
    ![link](/group/item): Use this when you are linking to an item in a group outside the group containing the Markdown document. For example, if you have common resources in a specific group, you can link to them using this format.

Regarding keeping track of your linked images, if you drag and drop or copy and paste images into a Markdown document, they will be imported into a group in the document's location if Preference > Files > Markdown > Import images to group is enabled. The group name is also assigned in the preferences, with the default name being Assets. This group will also contain images from web content clipped as Markdown documents if the above option is enabled.

If you have enabled automatic WikiLinks > Names & Aliases, documents can be detected as you write your Markdown. These WikiLinks are active when previewing the file and are also preserved in a website export or conversion to other formats.

Drag and drop items into a Markdown document to add the appropriate links. Drag and drop documents while holding ⌘-⌥ will create a URL with an item link. Dropping an image with create a properly formatted Markdown image link. Drop .mp3 or .mp4 files to insert a playable multimedia link.

Another option for inserting links into Markdown documents, Control-click while editing and choose Insert Link To from the contextual menu. A Markdown formatted link will be automatically inserted for you. For images, just add an exclamation point before the link if you want it to display in the rendered document.

You can learn more about Markdown and its syntax on Gruber's Markdown pages or the MultiMarkdown syntax guide.

Metadata: One of the features of MultiMarkdown is metadata headers. These allow you to add non-displaying information about the document, like authors, dates, and even linked stylesheets. To use the feature, format the first line of the document with a colon, e.g., Author: DEVONtechnologies. This must be the first line of the document. Other metadata fields you wish to add must follow immediately after this first line.

However, if you would like the first line of your document to contain a colon, perhaps adding notes like Developer: A. Edwards and Re: OCR, just add a single blank line at the top of the document and the subsequent lines will be treated as normal paragraphs.

Emoji: For a little extra personalization, you can type Slack-style emoji, like :grinning:, directly in the Markdown document.

Markdown Extensions

To support some features in Markdown that aren't built in, DEVONthink supports a handful of known and widely used extensions. The first option below requires no user interaction. The following three can be enabled in Preferences > Files > Markdown, if desired.

Highlighting, strikethrough, …: Text notations, e.g., for noting changes are sometimes necessary in documents. DEVONthink supports the features of the CriticMarkup extension of Markdown. It also supports a few alternate highlighting syntaxes, like ==text== and ^^text^^, found in some other Markdown-enabled applications.

MathJax: Markdown is often used in academic situations, many using mathematical equations in their writing. DEVONthink supports the Mathjax extension that will beautifully render LaTeX coded equations in your Markdown documents.

Mermaid: Diagrams can be created in Markdown documents using the Mermaid extension. Add a line of three backticks as shown```mermaid. Add the diagram code as needed and close the diagram with another line of three backticks. There are several diagram types available and discussed on the Mermaid.js website.

Prism: For those writing code in their Markdown, DEVONthink supports Lea Verou's Prism extension. Just add a line of three backticks ```language- and the language you're writing about. For example, ```language-applescript. Remember to add a line of three backticks under the code to close it. This displays syntax highlighting of code blocks in the rendered output. Note it does not affect the Markdown source as you're writing, only the rendered output.

Note: Not all languages supported by Prism are available. Additional languages may be added in the future if there's sufficient interest in them.

Navigation Bar

When working with Markdown documents, you can switch between Preview and Source modes. There also is a special icon present in the navigation bar. This switches to Side-by-Side mode, allowing you to edit and preview the current document in two side-by-side panes.

Contextual menu

In addition to the contextual menu items available with text selections in the document source, Markdown documents have a special command: Copy Section Link. This copies a link to the current document, but appends a pointer to the selected paragraph.