Inline code
Use it for commands, file names, function names and values inside a sentence.
You write
Open `settings.json` and set `"theme"` to `"dark"`.You see
Open settings.json and set "theme" to "dark".
A backtick inside inline code
Wrap the code in two backticks instead of one, with a space on each side.
You write
Use `` `code` `` to show inline code.You see
Use `code` to show inline code.
Code blocks
Three backticks on a line of their own start the block, and three more end
it. Three tildes, ~~~, work the same way.
You write
```
Plain text, kept exactly as typed.
Spaces and line breaks included.
```You see
Plain text, kept exactly as typed.
Spaces and line breaks included.Name the language to get colors
Write the language straight after the opening backticks, with no space. This is called syntax highlighting.
You write
```python
def greet(name):
return f"Hello, {name}"
```
```css
.button {
color: white;
background: #a74820;
}
```You see
def greet(name):
return f"Hello, {name}".button {
color: white;
background: #a74820;
}The names most people need:
| Language | Name to write |
|---|---|
| JavaScript | js or javascript |
| TypeScript | ts or typescript |
| Python | python or py |
| HTML | html |
| CSS | css |
| JSON | json |
| YAML | yaml or yml |
| Shell | sh, bash or shell |
| SQL | sql |
| Java | java |
| C# | csharp or cs |
| Go | go |
| Rust | rust or rs |
| Markdown | md or markdown |
| Plain text | text, or nothing |
If the name is not recognized, the code still shows, just without colors.
Show changes with a diff block
Name the language diff and start lines with + for added and - for
removed.
You write
```diff
const port = 3000;
- const host = 'localhost';
+ const host = '0.0.0.0';
```You see
const port = 3000;
- const host = 'localhost';
+ const host = '0.0.0.0';Show a code block inside a code block
Use more backticks on the outside than on the inside. Four backticks can hold a block that uses three.
You write
````md
```js
console.log('inside');
```
````You see
```js
console.log('inside');
```Indented code blocks
The older way: indent every line by four spaces, with an empty line before it. It still works, but it cannot name a language, so fences are better.
You write
Text before.
indented code
line twoYou see
Text before.
indented code
line twoFile titles and highlighted lines
These are not part of standard Markdown, but MarkdownPaper reads them from the fence. GitHub and most other apps ignore them and show the code as usual.
You write
```ts title="src/config.ts" {2}
export const config = {
port: 3000,
};
```You see
export const config = {
port: 3000,
};Common problems
- No colors. The language name is missing or misspelled, or there is a space before it.
- The block never ends. The closing backticks are missing, or there are fewer of them than the opening.
- Markdown inside code is not formatted. That is on purpose. Code is shown as typed.
Questions
How do I add a code block in Markdown?
Put three backticks on the line before the code and three on the line after it. Add a language name after the first three for colors.
What is the difference between inline code and a code block?
Inline code sits inside a sentence and uses one backtick on each side. A code block sits on its own lines, keeps its line breaks, and can be colored.
How do I write a backtick key on my keyboard?
On most English keyboards it is the key above Tab, left of the 1. On some other layouts it is next to the Enter key, or typed with a dead key followed by a space.
Why is my code block showing on one line?
The backticks are on the same line as the code. Each set of three backticks needs a line of its own.
Next
- Markdown line breaks, for when text should break and code is not the answer.
- Read code heavy Markdown with colors on all three paper stocks.