sketchboard help

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.

Heading Example

Note Element Heading Syntax (Notes)

Just Text Element Heading Just Text

Bullets

Notes Bullets Syntax Just Text 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

Bold and Italic

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

Example of markdown formatting

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

Example table with markdown formatting

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:

Other file content highlighting

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

Example Javascript language syntax highlight with markdown formatting

Go Programming Language

Example code snippet:

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

    func main() {
    }
    ~~~

Unrendered and rendered look on Sketchboard

Example go language syntax highlight with markdown formatting

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

Example scala language syntax highlight with markdown formatting

SQL

Example code snippet:

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

Unrendered and rendered look on Sketchboard

Example SQL language syntax highlight with markdown formatting

HTML

Example code snippet:

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

Unrendered and rendered look on Sketchboard

Example scala language syntax highlight with markdown formatting

JSON

Unrendered on Sketchboard Bold and Italic

Rendered

Bold and Italic

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 \. Note Escaping

← Back to help