You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* outline for updates
* update intro
* add option syntax
* update title section
* icon section
* line highlighting and focusing
* showLineNumbers
* expandable
* wrap
* copyedits
* typo
* update to lines
* add nav tag
* update md to mdx
* support for all Shiki languages
* update examples
* edit `New` tag
* group code block options
* add more options to code block example
* add links to icon libraries
* fix heading
---------
Co-authored-by: dks333 <[email protected]>
description: "Display inline code and code blocks"
4
4
icon: "code"
5
+
tag: "New"
5
6
---
6
7
7
-
## Basic
8
+
## Adding code samples
8
9
9
-
### Inline Code
10
+
You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.
11
+
12
+
### Inline code
10
13
11
14
To denote a `word` or `phrase` as code, enclose it in backticks (\`).
12
15
13
16
```mdx
14
17
To denote a `word` or `phrase` as code, enclose it in backticks (`).
15
18
```
16
19
17
-
### Code Block
20
+
### Code blocks
18
21
19
-
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language.
22
+
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Specify the programming language for syntax highlighting and to enable meta options. Add any meta options after the language.
20
23
21
-
```java HelloWorld.java
24
+
```java HelloWorld.java lines icon="java"
22
25
classHelloWorld {
23
26
publicstaticvoidmain(String[] args) {
24
27
System.out.println("Hello, World!");
@@ -27,7 +30,7 @@ class HelloWorld {
27
30
```
28
31
29
32
````mdx
30
-
```java HelloWorld.java
33
+
```java HelloWorld.java lines icon="java"
31
34
classHelloWorld {
32
35
publicstaticvoidmain(String[] args) {
33
36
System.out.println("Hello, World!");
@@ -36,9 +39,23 @@ class HelloWorld {
36
39
```
37
40
````
38
41
39
-
## Syntax Highlighting
42
+
## Code block options
43
+
44
+
You can add meta options to your code blocks to customize their appearance.
45
+
46
+
<Note>
47
+
You must specify a programming language for a code block before adding any other meta options.
48
+
</Note>
49
+
50
+
### Option syntax
51
+
52
+
***String and boolean options**: Wrap with `""`, `''`, or no quotes.
53
+
***Expression options**: Wrap with `{}`, `""`, or `''`.
40
54
41
-
Enable syntax highlighting by adding the language name after the opening backticks of a code snippet.
55
+
### Syntax highlighting
56
+
Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
57
+
58
+
We use Shiki for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.
42
59
43
60
```java
44
61
classHelloWorld {
@@ -58,124 +75,36 @@ class HelloWorld {
58
75
```
59
76
````
60
77
61
-
### Languages
62
-
63
-
We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax:
Add a title after the programming language to set the name of your code example. The text can be anything as long as its all in one line.
78
+
### Title
79
+
Add a title after the programming language to label your code example. Titles can be any string on a single line.
163
80
164
81
```javascript Code Block Example
165
82
consthello="world";
166
83
```
167
84
168
-
````mdx Code Block Example
85
+
````mdx
169
86
```javascript Code Block Example
170
87
consthello="world";
171
88
```
172
89
````
173
90
174
-
## Line Highlighting
91
+
### Icon
92
+
Add an icon to your code block. You can use [FontAwesome](https://fontawesome.com/icons) icons, [Lucide](https://lucide.dev/icons/) icons, or absolute URLs.
175
93
176
-
Highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces `{}` and specify line numbers or ranges separated by commas.
94
+
```javascript icon="square-js"
95
+
consthello="world";
96
+
```
177
97
178
-
```javascript Line Highlighting Example {1,3-5}
98
+
````mdx
99
+
```javascript icon="square-js"
100
+
consthello="world";
101
+
```
102
+
````
103
+
104
+
### Line Highlighting
105
+
Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.
106
+
107
+
```javascript Line Highlighting Example highlight={1-2,5}
179
108
constgreeting="Hello, World!";
180
109
functionsayHello() {
181
110
console.log(greeting);
@@ -184,7 +113,7 @@ sayHello();
184
113
```
185
114
186
115
````mdx
187
-
```javascript Line Highlighting Example {1,3-5}
116
+
```javascript Line Highlighting Example highlight={1-2,5}
188
117
constgreeting="Hello, World!";
189
118
functionsayHello() {
190
119
console.log(greeting);
@@ -193,11 +122,52 @@ sayHello();
193
122
```
194
123
````
195
124
196
-
## Expandable
125
+
### Line focusing
126
+
Focus on specific lines in your code blocks using `focus` with line numbers or ranges.
127
+
128
+
```javascript Line Focus Example focus={2,4-5}
129
+
constgreeting="Hello, World!";
130
+
functionsayHello() {
131
+
console.log(greeting);
132
+
}
133
+
sayHello();
134
+
```
135
+
136
+
````mdx
137
+
```javascript Line Focus Example focus={2,4-5}
138
+
constgreeting="Hello, World!";
139
+
functionsayHello() {
140
+
console.log(greeting);
141
+
}
142
+
sayHello();
143
+
```
144
+
````
197
145
198
-
If you have a long code block and `[expandable]` after your title to make it close and expand.
146
+
### Show line numbers
147
+
Display line numbers on the left side of your code block using `lines`.
199
148
200
-
```python library.py [expandable]
149
+
```javascript Show Line Numbers Example lines
150
+
constgreeting="Hello, World!";
151
+
functionsayHello() {
152
+
console.log(greeting);
153
+
}
154
+
sayHello();
155
+
```
156
+
157
+
````mdx
158
+
```javascript Show Line Numbers Example lines
159
+
constgreeting="Hello, World!";
160
+
functionsayHello() {
161
+
console.log(greeting);
162
+
}
163
+
sayHello();
164
+
```
165
+
````
166
+
167
+
### Expandable
168
+
Allow users to expand and collapse long code blocks using `expandable`.
169
+
170
+
```python Expandable Example expandable
201
171
from datetime import datetime, timedelta
202
172
from typing import Dict, List, Optional
203
173
from dataclasses import dataclass
@@ -288,8 +258,32 @@ if __name__ == "__main__":
288
258
```
289
259
290
260
````mdx
291
-
```javascript Expandable Example [expandable]
292
-
constgreeting="Hello, World!";
261
+
```python Expandable Example expandable
262
+
from datetime import datetime, timedelta
263
+
from typing import Dict, List, Optional
264
+
from dataclasses import dataclass
265
+
266
+
# ...
267
+
268
+
if__name__=="__main__":
269
+
main()
270
+
```
271
+
````
272
+
273
+
### Wrap
274
+
Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
275
+
276
+
```javascript Wrap Example wrap
277
+
constgreeting="Hello, World! I am a long line of text that will wrap to the next line.";
278
+
functionsayHello() {
279
+
console.log(greeting);
280
+
}
281
+
sayHello();
282
+
```
283
+
284
+
````mdx
285
+
```javascript Wrap Example wrap
286
+
constgreeting="Hello, World! I am a long line of text that will wrap to the next line.";
0 commit comments