Oftentimes, you need to display a code example on the page. This example could be as simple as a one-liner or as complex as a diff view. Below are the ways you can use fenced code blocks with NextBook.
Wrap your code using triple ``` characters for the simplest code formatting.
1``` 2Everything within fenced code will 3be displayed in monospace font. 4```
results in:
1Everything within fenced code will 2be displayed in monospace font.
You can add syntax highlighting by specifying code's language after triple ```. NextBook uses PrismJS for themes and language definitions as it is currently the most complete one.
When application's theme changes, so does the fenced code theme. Try it now by pressing T.
1```jsx 2import React, { useState } from 'react' 3 4function Square(props) { 5 const [value, setValue] = useState(null) 6 7 return ( 8 <button className="square" onClick={() => alert('click')}> 9 {props.value} 10 </button> 11 ) 12} 13```
results in:
1import React, { useState } from 'react' 2 3function Square(props) { 4 const [value, setValue] = useState(null) 5 6 return ( 7 <button className="square" onClick={() => alert('click')}> 8 {props.value} 9 </button> 10 ) 11}
You can force dark syntax highlighting even on light theme. Provide dark parameter to do that. Swith to light theme by pressing T. to see code block below still using dark theme.
1```jsx dark 2import React, { useState } from 'react' 3 4function Square(props) { 5 const [value, setValue] = useState(null) 6 7 return ( 8 <button className="square" onClick={() => alert('click')}> 9 {props.value} 10 </button> 11 ) 12} 13```
results in:
1import React, { useState } from 'react' 2 3function Square(props) { 4 const [value, setValue] = useState(null) 5 6 return ( 7 <button className="square" onClick={() => alert('click')}> 8 {props.value} 9 </button> 10 ) 11}
Any code block will have automatic Copy icon clicking which copies contents of code block to clipboard unless you pass nocopy meta value to code fence.
You can display various information like title and link to source in code header.
Often you need to tell which file you are talking about. You can specify this by adding title info:
1```jsx title=somefolder/app.jsx 2import React, { useState } from 'react' 3 4function Square(props) { 5 const [value, setValue] = useState(null) 6 7 return ( 8 <button className="square" onClick={() => alert('click')}> 9 {props.value} 10 </button> 11 ) 12} 13```
results in:
somefolder/app.jsx1import React, { useState } from 'react' 2 3function Square(props) { 4 const [value, setValue] = useState(null) 5 6 return ( 7 <button className="square" onClick={() => alert('click')}> 8 {props.value} 9 </button> 10 ) 11}
In case you need to link to original source you can pass link metadata. Now, title will be a link to the specified URL.
1```python title=colors/primary_colors.py link=https://github.com/geekcomputers/Python/blob/master/Colors/primary_colors.py 2def diff(a, b): 3 """ 4 TODO: fix this function!! 5 """ 6 return a - b 7```
results in:
1def diff(a, b): 2 """ 3 TODO: fix this function!! 4 """ 5 return a - b
Lines of code can have automatic numbering. Provide numbered metadata to achive that:
1```html numbered 2<!DOCTYPE html> 3<html lang='en'> 4<head> 5 <meta charset='UTF-8'> 6 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 7 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 8 <title>Document</title> 9</head> 10<body> 11 <h1>Hello World!</h1> 12</body> 13</html> 14```
results in:
1<!DOCTYPE html> 2<html lang='en'> 3<head> 4 <meta charset='UTF-8'> 5 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <title>Document</title> 8</head> 9<body> 10 <h1>Hello World!</h1> 11</body> 12</html>
Code can start from any provided number. Use numbered together with startline metadata to achive that. Default startline is 1 unless provided.
1```html numbered startline=3 2<head> 3 <meta charset='UTF-8'> 4 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 5 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 6 <title>Document</title> 7</head> 8```
results in:
3<head> 4 <meta charset='UTF-8'> 5 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <title>Document</title> 8</head>
In some cases there's a need to highlight/mark some lines and then describe each line seperately. Any number of lines can be marked by providing marked parameter:
1```html marked=2,4-6,6,10 2<!DOCTYPE html> 3<html lang='en'> 4<head> 5 <meta charset='UTF-8'> 6 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 7 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 8 <title>Document</title> 9</head> 10<body> 11 <h1>Hello World!</h1> 12</body> 13</html> 14```
results in:
1<!DOCTYPE html> 2<html lang='en'> 3<head> 4 <meta charset='UTF-8'> 5 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <title>Document</title> 8</head> 9<body> 10 <h1>Hello World!</h1> 11</body> 12</html>
Sometimes you want to show which lines were added or removed from code. This can be achieved by passing related line numbers as added and removed parameters. Added lines will be highlighted with light green, removed lines with light red color. Note that displaying numbers, although works, in this case would cause a confusion as line numbers do not repeat.
1```html removed=2,8 added=3,6,7-10 2<!DOCTYPE html> 3<html lang='en'> 4<html lang='ja'> 5<head> 6... 7</head> 8<body> 9 <h1>Hello World!</h1> 10 <h1>こんにちは世界!</h1> 11 <p>今日は天気がいいですね。</p> 12</body> 13</html> 14```
results in:
1<!DOCTYPE html> 2<html lang='en'> 3<html lang='ja'> 4<head> 5... 6</head> 7<body> 8 <h1>Hello World!</h1> 9 <h1>こんにちは世界!</h1> 10 <p>今日は天気がいいですね。</p> 11</body> 12</html>
You can also pass every other parameter mentioned above together. Here we are adding some of them:
1```html numbered marked=2,5,6,10 title=public/index.html link=https://gist.github.com/amiroff/04d57ef025845b191d9cd30c7ca13f20 2<!DOCTYPE html> 3<html lang='en'> 4<head> 5 <meta charset='UTF-8'> 6 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 7 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 8 <title>Document</title> 9</head> 10<body> 11 <h1>Hello World!</h1> 12</body> 13</html> 14```
results in
1<!DOCTYPE html> 2<html lang='en'> 3<head> 4 <meta charset='UTF-8'> 5 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <title>Document</title> 8</head> 9<body> 10 <h1>Hello World!</h1> 11</body> 12</html>
To escape (prevent from displaying as highlighted code) block and simply display how fenced code is being used in source, wrap it with ~~~:
1~~~ 2```html 3<!DOCTYPE html> 4<html lang='en'> 5<head> 6 <meta charset='UTF-8'> 7 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 8 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 9 <title>Document</title> 10</head> 11<body> 12 13</body> 14</html> 15``` 16~~~
will result in:
1```html 2<!DOCTYPE html> 3<html lang='en'> 4<head> 5 <meta charset='UTF-8'> 6 <meta http-equiv='X-UA-Compatible' content='IE=edge'> 7 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 8 <title>Document</title> 9</head> 10<body> 11 12</body> 13</html> 14```