How to create a code block in Markdown

You are looking for ` key on your keyboard.

Hit that key 3 times on top of a paragraph where you want your code block to start. And hit Enter key:

To create a code block, place 3 backticks on an empty line and hit enter.

To create a code block out of existing paragraphs, place 3 backticks above the paragraph you want your code block to start, and place another 3 backticks below the paragraph you want your code block to end:

Insert 3 backtick characters on top of a paragraph you want the code block to start, and another 3 backticks at the bottom of a paragraph where the code block ends.

Behavioural change of code block in Zuunote

In Zuunote, placing 3 backticks won't cause entire content below them to be in a code block. This is contrary to default behaviour in Markdown as seen in https://markdown-it.github.io/:

Entering 3 backticks on a new line anywhere in a page causes entire content below to be encapsulated in a code block.

Syntax highlighting code blocks in Markdown

The official practice to add color highlighting on a code block's content according to a particular programming language grammar is to enter the language's short form name right after the open fence's backticks. And Zuunote does not break away from this tradition:

Enter js to the end of open fence's backticks to color highlight associated code block's content according to Javascript language grammar.

You can also specify the language when creating a code block:

To create an empty code block following a particular language, place 3 backticks followed by the desired language name, and hit Enter key.

Syntax-highlighting in Zuunote is powered by Lezer library that's also used in Codemirror.

Drag, highlight and delete

In Zuunote website, I showed a demo when user drag, highlight and delete a code block across its fences to outer content, the code block will be removed due to the fences being treated and remained as plain-texts. Well, it turns out to be a gnarly undertaking once beyond the happy path. On launch, such use case will behave similar to editors like Tiptap:

In an active code block, drag and highlight anywhere in the code block and release it in another code block will merge the former code block into the latter code block.