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
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, like a title or icon, 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,24 @@ 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
+
57
+
Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
58
+
59
+
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
60
43
61
```java
44
62
classHelloWorld {
@@ -58,124 +76,39 @@ class HelloWorld {
58
76
```
59
77
````
60
78
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.
79
+
### Title
80
+
81
+
Add a title to label your code example. Use `title="Your title"` or a string on a single line.
163
82
164
83
```javascript Code Block Example
165
84
consthello="world";
166
85
```
167
86
168
-
````mdx Code Block Example
87
+
````mdx
169
88
```javascript Code Block Example
170
89
consthello="world";
171
90
```
172
91
````
173
92
174
-
## Line Highlighting
93
+
### Icon
94
+
95
+
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.
96
+
97
+
```javascript icon="square-js"
98
+
consthello="world";
99
+
```
100
+
101
+
````mdx
102
+
```javascript icon="square-js"
103
+
consthello="world";
104
+
```
105
+
````
106
+
107
+
### Line Highlighting
175
108
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.
109
+
Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.
177
110
178
-
```javascript Line Highlighting Example {1,3-5}
111
+
```javascript Line Highlighting Example highlight= {1-2,5}
179
112
constgreeting="Hello, World!";
180
113
functionsayHello() {
181
114
console.log(greeting);
@@ -184,7 +117,7 @@ sayHello();
184
117
```
185
118
186
119
````mdx
187
-
```javascript Line Highlighting Example {1,3-5}
120
+
```javascript Line Highlighting Example highlight={1-2,5}
188
121
constgreeting="Hello, World!";
189
122
functionsayHello() {
190
123
console.log(greeting);
@@ -193,11 +126,55 @@ sayHello();
193
126
```
194
127
````
195
128
196
-
##Expandable
129
+
### Line focusing
197
130
198
-
If you have a long code block and `[expandable]` after your title to make it close and expand.
131
+
Focus on specific lines in your code blocks using `focus` with line numbers or ranges.
199
132
200
-
```python library.py [expandable]
133
+
```javascript Line Focus Example focus= {2,4-5}
134
+
constgreeting="Hello, World!";
135
+
functionsayHello() {
136
+
console.log(greeting);
137
+
}
138
+
sayHello();
139
+
```
140
+
141
+
````mdx
142
+
```javascript Line Focus Example focus={2,4-5}
143
+
constgreeting="Hello, World!";
144
+
functionsayHello() {
145
+
console.log(greeting);
146
+
}
147
+
sayHello();
148
+
```
149
+
````
150
+
151
+
### Show line numbers
152
+
153
+
Display line numbers on the left side of your code block using `lines`.
154
+
155
+
```javascript Show Line Numbers Example lines
156
+
constgreeting="Hello, World!";
157
+
functionsayHello() {
158
+
console.log(greeting);
159
+
}
160
+
sayHello();
161
+
```
162
+
163
+
````mdx
164
+
```javascript Show Line Numbers Example lines
165
+
constgreeting="Hello, World!";
166
+
functionsayHello() {
167
+
console.log(greeting);
168
+
}
169
+
sayHello();
170
+
```
171
+
````
172
+
173
+
### Expandable
174
+
175
+
Allow users to expand and collapse long code blocks using `expandable`.
176
+
177
+
```python Expandable Example expandable
201
178
from datetime import datetime, timedelta
202
179
from typing import Dict, List, Optional
203
180
from dataclasses import dataclass
@@ -288,8 +265,33 @@ if __name__ == "__main__":
288
265
```
289
266
290
267
````mdx
291
-
```javascript Expandable Example [expandable]
292
-
constgreeting="Hello, World!";
268
+
```python Expandable Example expandable
269
+
from datetime import datetime, timedelta
270
+
from typing import Dict, List, Optional
271
+
from dataclasses import dataclass
272
+
273
+
# ...
274
+
275
+
if__name__=="__main__":
276
+
main()
277
+
```
278
+
````
279
+
280
+
### Wrap
281
+
282
+
Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
283
+
284
+
```javascript Wrap Example wrap
285
+
constgreeting="Hello, World! I am a long line of text that will wrap to the next line.";
286
+
functionsayHello() {
287
+
console.log(greeting);
288
+
}
289
+
sayHello();
290
+
```
291
+
292
+
````mdx
293
+
```javascript Wrap Example wrap
294
+
constgreeting="Hello, World! I am a long line of text that will wrap to the next line.";
Copy file name to clipboardExpand all lines: guides/hidden-pages.mdx
+8-6Lines changed: 8 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,11 @@ description: "Exclude pages from your navigation"
4
4
icon: "eye-closed"
5
5
---
6
6
7
-
Hidden pages are removed from your site's navigation while remaining publicly accessible to anyone who knows their URL.
7
+
Hidden pages are removed from your site's navigation but remain publicly accessible to anyone who knows their URL.
8
8
9
-
Use hidden pages for content that you want to be accessible on your site, but not discoverable through the navigation. For content requiring strict access control, you must configure [authentication](/authentication-personalization/authentication-setup).
9
+
Use hidden pages for content that you want to be accessible on your site or referenced as context for AI tools, but not discoverable through the navigation.
10
+
11
+
For content requiring strict access control, you must configure [authentication](/authentication-personalization/authentication-setup).
10
12
11
13
If you want to hide pages for specific groups of users, use personalization to control [page visibility](/authentication-personalization/overview#page-visibility).
12
14
@@ -18,14 +20,14 @@ A page is hidden if it is not included in your `docs.json` navigation. To hide a
18
20
Some navigation elements like sidebars, dropdowns, and tabs may appear empty or shift layout on hidden pages.
19
21
</Note>
20
22
21
-
## Searchand SEO
23
+
## Search, SEO, and AI context
22
24
23
-
By default, hidden pages are excluded from indexing for search engines and internal search within your docs. To include hidden pages in search results, add this setting to your `docs.json`:
25
+
By default, hidden pages are excluded from indexing for search engines, internal search within your docs, and as context for the AI assistant. To include hidden pages in search results and as context for the assistant, add the `seo` property to your `docs.json`:
24
26
25
27
```json
26
-
"seo" {
28
+
"seo": {
27
29
"indexing": "all"
28
30
}
29
31
```
30
32
31
-
To exclude a specific page from search, add `noindex: true` to its frontmatter.
33
+
To exclude a specific page, add `noindex: "true"` to its frontmatter.
0 commit comments