Markdown Text Formatting

Highlight important topics on your board using markdown text formatting.

Sketchboard supports markdown, CommonMark and GFM (GitHub Flavored Markdown) text formatting on Notes, Just Text and connection labels.

Please find CommonMark and GFM for more details on formatting.

Headings

Markdown provides two styles to write headings.

Note Element

Just Text Element

Bullets

You can use either - or * characters for bullet point.

- First Level 1

    - Second Level 1

        - Third Level 1

Note, Nested level bullets are 4/8 spaces. You can use TAB to autofill 4 space characters in the editor.

Bold and Italics

Task list

Task list can be created with the following syntax.

* [ ] todo
* [x] done

• todo
• done

Indented code & quote

Example:

 1.  A paragraph piece

        indented code

    > A block quote.

Unrendered and rendered look on Sketchboard

Tables

Table content example:

| Col 1 |  Col 2 |
| - | - |
|first cell content | second cell content |
|second row column 1 | second row column 2 |

Unrendered and rendered look on Sketchboard

Emphasized text

You can `emphasize text` in the middle of a sentence.

You can emphasize text in the middle of a sentence.

Indentation/Code Block for Programming Language Syntax Highlighting

You can use indented and fenced code blocks for programming language syntax highlighting on your canvas. Sketchboard supports several programming languages for syntax highlighting:

• JavaScript
• TypeScript
• Go programming language
• Scala
• Python

Other file content highlighting

• SQL
• JSON
• XML
• HTML

Use a sequence of at least three consecutive backtick characters (`) or tildes (~). (Tildes and backticks cannot be mixed.) Check out some of the examples of using syntax highlighting with the notes shape below.

JavaScript

Example code snippet:

    ~~~java
    class Foo {
        public static void main(String[] args) {
        }
    }
    ~~~

Unrendered and rendered look on Sketchboard

Go Programming Language

Example code snippet:

    ~~~go
    type Abs struct {
        Field string `json:"field"`
    }

    func main() {
    }
    ~~~

Unrendered and rendered look on Sketchboard

Scala

Example code snippet:

    ~~~scala
    object BoardSnippet extends BoardUtils with PreviewFileHelpers with LastAccess with SLoggable {
        private def parseAndCheck(
            item: JValue,
            secCheck: (Diagram) => Boolean
        ): Box[Diagram] = {
            for {
                board <- JsonBoardInfo(item)
                diagram <- Diagram.findWithAccountByName(board.boardId)
                if secCheck(diagram)
            } yield {
                diagram
            }
        }
    }
    ~~~

Unrendered and rendered look on Sketchboard

SQL

Example code snippet:

    ~~~sql
    SELECT * FROM accountuser au JOIN account a ON a.id = au.account;
    ~~~

Unrendered and rendered look on Sketchboard

HTML

Example code snippet:

    ~~~java
    class Foo {
        public static void main(String[] args) {
        }
    }
    ~~~

Unrendered and rendered look on Sketchboard

JSON

Unrendered on Sketchboard

Rendered

Once you have the syntax highlighted shapes on your Sketchboard canvas, you can also create additional shapes to initiate conversation about the code. Check out our blog post about how to use syntax highlighting here.

Escaping

When you want to show characters used in formatting, those needs to be escaped with \.