sketchboard blog

Programming Language Syntax highlighting

Happy to announce that Sketchboard supports common programming languages' syntax highlighting. Syntax highlighting is enabled on Markdown supported shapes, note, just text and connection labels.

Supported programming languages:

Other file content highlighting

~~~jsx
import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'

ReactDom.render(
    <ReactMarkdown># Hello, *world*!</ReactMarkdown>,
    document.body
)
~~~
ReactJS Syntax Highlight Example

You can mark code snippet with a freehand tool to annotate your code.

Scala Syntax Highlight Example with Free hand annotation
~~~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
		}
	}
}
~~~

Development details and Big Thanks

Sketchboard utilizes awesome software to implement syntax highlighting, on a highlevel:

PrismJS is fast and relatively lightweight if supported languages are kept minimal.

Sketchboard uses Webpack to code split the code and download syntax highlighting related components only when code blocks are used on a board. This makes loading of code blocks slightly slower on first time and when ever there are changes to those dependencies.