From 1edd825c84f6ab4828d468d80a1ae9f2e8e43174 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:44:07 -0700 Subject: [PATCH 01/21] outline for updates --- code.mdx | 40 ++++++++++++++++++++++++++++------------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/code.mdx b/code.mdx index 8261e1cbd..d74ee6271 100644 --- a/code.mdx +++ b/code.mdx @@ -4,9 +4,11 @@ description: "Display inline code and code blocks" icon: "code" --- -## Basic +## Adding code samples -### Inline Code +TODO: a little intro + +### Inline code To denote a `word` or `phrase` as code, enclose it in backticks (\`). @@ -14,11 +16,11 @@ To denote a `word` or `phrase` as code, enclose it in backticks (\`). To denote a `word` or `phrase` as code, enclose it in backticks (`). ``` -### Code Block +### Code block -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. +Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. -```java HelloWorld.java +``` class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -26,8 +28,8 @@ class HelloWorld { } ``` -````md -```java HelloWorld.java +```` +``` class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -37,7 +39,8 @@ class HelloWorld { ```` ## Syntax Highlighting - +TODO:To enable syntax highlighting, specify the programming language of your code snippet. Optionally, you can also write the name of your code after the programming language. +TODO: - lang `string` Enable syntax highlighting by adding the language name after the opening backticks of a code snippet. ```java @@ -157,8 +160,8 @@ We use [Shiki](https://shiki.style/languages) for syntax highlighting and suppor -## Names - +## Title +TODO: - title `string` 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. ```javascript Code Block Example @@ -171,8 +174,11 @@ const hello = "world"; ``` ```` -## Line Highlighting +## Icon +TODO: - icon `string`: it can be a fontawesome icon, lucide icon, or icon with absolute url (no icons with relative paths yet) +## Line Highlighting +TODO: - highlight `expression | string`: `{1, 3-5}` or `"1, 4-5"` 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. ```javascript Line Highlighting Example {1,3-5} @@ -193,8 +199,14 @@ sayHello(); ``` ```` -## Expandable +## Line focusing +TODO: - focus `expression | string`: `{1, 3-5}` or `"1, 4-5"` + +## Show line numbers +TODO: - showLineNumbers `boolean` +## Expandable +TODO: - expandable `boolean` If you have a long code block and `[expandable]` after your title to make it close and expand. ```python library.py [expandable] @@ -296,3 +308,7 @@ function sayHello() { sayHello(); ``` ```` + +## Wrap +TODO: - wrap `boolean` + From ecfd929bebbe722c052fa600bc4d5359339b7096 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:55:16 -0700 Subject: [PATCH 02/21] update intro --- code.mdx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/code.mdx b/code.mdx index d74ee6271..eeb8aca97 100644 --- a/code.mdx +++ b/code.mdx @@ -6,7 +6,7 @@ icon: "code" ## Adding code samples -TODO: a little intro +You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more. ### Inline code @@ -18,9 +18,9 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`). ### Code block -Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. +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 add any meta options after the language. -``` +```java HellowWorld.java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -28,8 +28,8 @@ class HelloWorld { } ``` -```` -``` +````markdown +```java HellowWorld.java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -310,5 +310,4 @@ sayHello(); ```` ## Wrap -TODO: - wrap `boolean` - +TODO: - wrap `boolean` \ No newline at end of file From ee99afb4f7529e72a5f30454d8845e1469a976b0 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Mon, 9 Jun 2025 17:05:55 -0700 Subject: [PATCH 03/21] add option syntax --- code.mdx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/code.mdx b/code.mdx index eeb8aca97..302a2c173 100644 --- a/code.mdx +++ b/code.mdx @@ -38,10 +38,13 @@ class HelloWorld { ``` ```` -## Syntax Highlighting -TODO:To enable syntax highlighting, specify the programming language of your code snippet. Optionally, you can also write the name of your code after the programming language. -TODO: - lang `string` -Enable syntax highlighting by adding the language name after the opening backticks of a code snippet. +#### Option syntax + +* **String and boolean options**: Wrap with `""`, `''`, or no quotes. +* **Expression options**: Wrap with `{}`, `""`, or `''`. + +## Syntax highlighting +Enable syntax highlighting by specifying the programming language after the opening backticks of a code block. The language name is a string. ```java class HelloWorld { @@ -63,7 +66,7 @@ class HelloWorld { ### Languages -We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard markdown syntax: +We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard Markdown syntax: From 200dd119a6a98b262c8dac2b7732adb69ddd78ef Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Mon, 9 Jun 2025 17:08:51 -0700 Subject: [PATCH 04/21] update title section --- code.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code.mdx b/code.mdx index 302a2c173..bf711e691 100644 --- a/code.mdx +++ b/code.mdx @@ -164,8 +164,7 @@ We use [Shiki](https://shiki.style/languages) for syntax highlighting and suppor
## Title -TODO: - title `string` -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. +Add a title after the programming language to label a code example. Titles can be any string on a single line. ```javascript Code Block Example const hello = "world"; From 0e961327476d77c36d98e0c39e363a0a8e410573 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Mon, 9 Jun 2025 17:13:37 -0700 Subject: [PATCH 05/21] icon section --- code.mdx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/code.mdx b/code.mdx index bf711e691..9a280f1a9 100644 --- a/code.mdx +++ b/code.mdx @@ -177,7 +177,17 @@ const hello = "world"; ```` ## Icon -TODO: - icon `string`: it can be a fontawesome icon, lucide icon, or icon with absolute url (no icons with relative paths yet) +Add an icon to a code block using a string. You can use FontAwesome icons, Lucide icons, or icons with absolute URLs. + +```javascript icon="globe" +const hello = "world"; +``` + +````md icon="globe" +```javascript icon="globe" +const hello = "world"; +``` +```` ## Line Highlighting TODO: - highlight `expression | string`: `{1, 3-5}` or `"1, 4-5"` From 666adcf29eee30dc3091ed726edeacbc01b65052 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 08:38:47 -0700 Subject: [PATCH 06/21] line highlighting and focusing --- code.mdx | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/code.mdx b/code.mdx index 9a280f1a9..56729a517 100644 --- a/code.mdx +++ b/code.mdx @@ -44,7 +44,7 @@ class HelloWorld { * **Expression options**: Wrap with `{}`, `""`, or `''`. ## Syntax highlighting -Enable syntax highlighting by specifying the programming language after the opening backticks of a code block. The language name is a string. +Enable syntax highlighting by specifying the programming language after the opening backticks of a code block. ```java class HelloWorld { @@ -164,7 +164,7 @@ We use [Shiki](https://shiki.style/languages) for syntax highlighting and suppor ## Title -Add a title after the programming language to label a code example. Titles can be any string on a single line. +Add a title after the programming language to label your code example. Titles can be any string on a single line. ```javascript Code Block Example const hello = "world"; @@ -177,7 +177,7 @@ const hello = "world"; ```` ## Icon -Add an icon to a code block using a string. You can use FontAwesome icons, Lucide icons, or icons with absolute URLs. +Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs. ```javascript icon="globe" const hello = "world"; @@ -190,8 +190,7 @@ const hello = "world"; ```` ## Line Highlighting -TODO: - highlight `expression | string`: `{1, 3-5}` or `"1, 4-5"` -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. +Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight. ```javascript Line Highlighting Example {1,3-5} const greeting = "Hello, World!"; @@ -212,7 +211,25 @@ sayHello(); ```` ## Line focusing -TODO: - focus `expression | string`: `{1, 3-5}` or `"1, 4-5"` +Focus on specific lines in your code blocks using `focus` with line numbers or ranges. + +```javascript Line Focus Example {2,4-5} +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` + +````md +```javascript Line Focus Example {2,4-5} +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` +```` ## Show line numbers TODO: - showLineNumbers `boolean` From adc23dc512974ec86552201e6a8931dbfc01a590 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 08:41:20 -0700 Subject: [PATCH 07/21] showLineNumbers --- code.mdx | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/code.mdx b/code.mdx index 56729a517..1a76d2668 100644 --- a/code.mdx +++ b/code.mdx @@ -192,7 +192,7 @@ const hello = "world"; ## Line Highlighting Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight. -```javascript Line Highlighting Example {1,3-5} +```javascript Line Highlighting Example highlight={1,3-5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -201,7 +201,7 @@ sayHello(); ``` ````md -```javascript Line Highlighting Example {1,3-5} +```javascript Line Highlighting Example highlight={1,3-5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -213,7 +213,7 @@ sayHello(); ## Line focusing Focus on specific lines in your code blocks using `focus` with line numbers or ranges. -```javascript Line Focus Example {2,4-5} +```javascript Line Focus Example focus={2,4-5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -222,7 +222,7 @@ sayHello(); ``` ````md -```javascript Line Focus Example {2,4-5} +```javascript Line Focus Example focus={2,4-5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -232,7 +232,25 @@ sayHello(); ```` ## Show line numbers -TODO: - showLineNumbers `boolean` +Display line numbers on the left side of your code block using `showLineNumbers`. + +```javascript Show Line Numbers Example showLineNumbers +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` + +````md +```javascript Show Line Numbers Example showLineNumbers +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` +```` ## Expandable TODO: - expandable `boolean` From 80047acca223b44cda8a647b0e38d74f6939005d Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 08:46:52 -0700 Subject: [PATCH 08/21] expandable --- code.mdx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/code.mdx b/code.mdx index 1a76d2668..e057e4208 100644 --- a/code.mdx +++ b/code.mdx @@ -253,10 +253,9 @@ sayHello(); ```` ## Expandable -TODO: - expandable `boolean` -If you have a long code block and `[expandable]` after your title to make it close and expand. +Allow users to expand and collapse long code blocks using `expandable`. -```python library.py [expandable] +```python Expandable Example expandable from datetime import datetime, timedelta from typing import Dict, List, Optional from dataclasses import dataclass @@ -347,12 +346,15 @@ if __name__ == "__main__": ``` ````md -```javascript Expandable Example [expandable] -const greeting = "Hello, World!"; -function sayHello() { - console.log(greeting); -} -sayHello(); +```python Expandable Example expandable +from datetime import datetime, timedelta +from typing import Dict, List, Optional +from dataclasses import dataclass + +# ... + +if __name__ == "__main__": + main() ``` ```` From 75f4dcf4b23c321b07eb8a54b5291809bdc05325 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 08:49:18 -0700 Subject: [PATCH 09/21] wrap --- code.mdx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/code.mdx b/code.mdx index e057e4208..eff05adb9 100644 --- a/code.mdx +++ b/code.mdx @@ -359,4 +359,22 @@ if __name__ == "__main__": ```` ## Wrap -TODO: - wrap `boolean` \ No newline at end of file +Enable text wrapping for long lines using `wrap`. + +```javascript Wrap Example wrap +const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` + +````markdown +```javascript Wrap Example wrap +const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` +```` From 83ba12940583401d29128ad13cc8bd2078fde5dc Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 08:58:44 -0700 Subject: [PATCH 10/21] copyedits --- code.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code.mdx b/code.mdx index eff05adb9..ed9238ee4 100644 --- a/code.mdx +++ b/code.mdx @@ -28,7 +28,7 @@ class HelloWorld { } ``` -````markdown +````md ```java HellowWorld.java class HelloWorld { public static void main(String[] args) { @@ -359,7 +359,7 @@ if __name__ == "__main__": ```` ## Wrap -Enable text wrapping for long lines using `wrap`. +Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read. ```javascript Wrap Example wrap const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; @@ -369,7 +369,7 @@ function sayHello() { sayHello(); ``` -````markdown +````md ```javascript Wrap Example wrap const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; function sayHello() { From 21b0cb4491b8ee2af894d2e5a22d18dec8f250dc Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Tue, 10 Jun 2025 09:16:45 -0700 Subject: [PATCH 11/21] typo --- code.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code.mdx b/code.mdx index ed9238ee4..9bb26e8bd 100644 --- a/code.mdx +++ b/code.mdx @@ -20,7 +20,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`). 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 add any meta options after the language. -```java HellowWorld.java +```java HelloWorld.java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -29,7 +29,7 @@ class HelloWorld { ``` ````md -```java HellowWorld.java +```java HelloWorld.java class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); From 4a510eff091e5d5db9e7b54203c560f5bb85f9e7 Mon Sep 17 00:00:00 2001 From: dks333 Date: Wed, 11 Jun 2025 09:28:57 -0700 Subject: [PATCH 12/21] update to lines --- code.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code.mdx b/code.mdx index 9bb26e8bd..d95f3880d 100644 --- a/code.mdx +++ b/code.mdx @@ -179,11 +179,11 @@ const hello = "world"; ## Icon Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs. -```javascript icon="globe" +```javascript icon="js" const hello = "world"; ``` -````md icon="globe" +````md icon="js" ```javascript icon="globe" const hello = "world"; ``` @@ -232,9 +232,9 @@ sayHello(); ```` ## Show line numbers -Display line numbers on the left side of your code block using `showLineNumbers`. +Display line numbers on the left side of your code block using `lines`. -```javascript Show Line Numbers Example showLineNumbers +```javascript Show Line Numbers Example lines const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -243,7 +243,7 @@ sayHello(); ``` ````md -```javascript Show Line Numbers Example showLineNumbers +```javascript Show Line Numbers Example lines const greeting = "Hello, World!"; function sayHello() { console.log(greeting); From 4382d232911aacdc920a8dd117a69db031a8f45d Mon Sep 17 00:00:00 2001 From: dks333 Date: Wed, 11 Jun 2025 09:34:21 -0700 Subject: [PATCH 13/21] add nav tag --- code.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/code.mdx b/code.mdx index d95f3880d..58761ffee 100644 --- a/code.mdx +++ b/code.mdx @@ -2,6 +2,7 @@ title: "Code" description: "Display inline code and code blocks" icon: "code" +tag: "NEW" --- ## Adding code samples From ce16313447464683f2e9771fa67b54c7ba4123bb Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:18:21 -0700 Subject: [PATCH 14/21] update md to mdx --- code.mdx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/code.mdx b/code.mdx index 58761ffee..074d3b90a 100644 --- a/code.mdx +++ b/code.mdx @@ -29,7 +29,7 @@ class HelloWorld { } ``` -````md +````mdx ```java HelloWorld.java class HelloWorld { public static void main(String[] args) { @@ -55,7 +55,7 @@ class HelloWorld { } ``` -````md +````mdx ```java class HelloWorld { public static void main(String[] args) { @@ -171,7 +171,7 @@ Add a title after the programming language to label your code example. Titles ca const hello = "world"; ``` -````md Code Block Example +````mdx Code Block Example ```javascript Code Block Example const hello = "world"; ``` @@ -180,12 +180,12 @@ const hello = "world"; ## Icon Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs. -```javascript icon="js" +```javascript icon="square-js" const hello = "world"; ``` -````md icon="js" -```javascript icon="globe" +````mdx +```javascript icon="square-js" const hello = "world"; ``` ```` @@ -201,7 +201,7 @@ function sayHello() { sayHello(); ``` -````md +````mdx ```javascript Line Highlighting Example highlight={1,3-5} const greeting = "Hello, World!"; function sayHello() { @@ -222,7 +222,7 @@ function sayHello() { sayHello(); ``` -````md +````mdx ```javascript Line Focus Example focus={2,4-5} const greeting = "Hello, World!"; function sayHello() { @@ -243,7 +243,7 @@ function sayHello() { sayHello(); ``` -````md +````mdx ```javascript Show Line Numbers Example lines const greeting = "Hello, World!"; function sayHello() { @@ -346,7 +346,7 @@ if __name__ == "__main__": main() ``` -````md +````mdx ```python Expandable Example expandable from datetime import datetime, timedelta from typing import Dict, List, Optional @@ -370,7 +370,7 @@ function sayHello() { sayHello(); ``` -````md +````mdx ```javascript Wrap Example wrap const greeting = "Hello, World! I am a long line of text that will wrap to the next line."; function sayHello() { From 58d5cdf769a9b3313cce0c7d880ca0a14a9d2af2 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:27:54 -0700 Subject: [PATCH 15/21] support for all Shiki languages --- code.mdx | 97 +------------------------------------------------------- 1 file changed, 1 insertion(+), 96 deletions(-) diff --git a/code.mdx b/code.mdx index 074d3b90a..2d193616b 100644 --- a/code.mdx +++ b/code.mdx @@ -67,102 +67,7 @@ class HelloWorld { ### Languages -We use [Shiki](https://shiki.style/languages) for syntax highlighting and support these languages using standard Markdown syntax: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LanguageID
Bashbash
Laravel Bladeblade
Cc
C++c++
C#c#
Dartdart
Gogo
Javajava
JavaScriptjavascript
JSONjson
JSXjsx
Kotlinkotlin
Loglog
Markdownmarkdown
PHPphp
Pythonpython
Rubyruby
Swiftswift
TypeScripttypescript
TSXtsx
YAMLyaml
+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. ## Title Add a title after the programming language to label your code example. Titles can be any string on a single line. From daa1aeafdd9c0a43dbcc9bcddaf9ffc71cce6c24 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:31:57 -0700 Subject: [PATCH 16/21] update examples --- code.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code.mdx b/code.mdx index 2d193616b..440467e0b 100644 --- a/code.mdx +++ b/code.mdx @@ -76,7 +76,7 @@ Add a title after the programming language to label your code example. Titles ca const hello = "world"; ``` -````mdx Code Block Example +````mdx ```javascript Code Block Example const hello = "world"; ``` @@ -98,7 +98,7 @@ const hello = "world"; ## Line Highlighting Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight. -```javascript Line Highlighting Example highlight={1,3-5} +```javascript Line Highlighting Example highlight={1-2,5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -107,7 +107,7 @@ sayHello(); ``` ````mdx -```javascript Line Highlighting Example highlight={1,3-5} +```javascript Line Highlighting Example highlight={1-2,5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); From afb3a3a3669dc9e75bc555832877c95ed8cc2918 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:32:19 -0700 Subject: [PATCH 17/21] edit `New` tag --- code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code.mdx b/code.mdx index 440467e0b..e4b0781e7 100644 --- a/code.mdx +++ b/code.mdx @@ -2,7 +2,7 @@ title: "Code" description: "Display inline code and code blocks" icon: "code" -tag: "NEW" +tag: "New" --- ## Adding code samples From 50de02d776d24bbe49e96f42caa2b52b09d280a7 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 11:38:54 -0700 Subject: [PATCH 18/21] group code block options --- code.mdx | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/code.mdx b/code.mdx index e4b0781e7..c3ac244a1 100644 --- a/code.mdx +++ b/code.mdx @@ -19,7 +19,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`). ### Code block -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 add any meta options after the language. +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. ```java HelloWorld.java class HelloWorld { @@ -39,14 +39,24 @@ class HelloWorld { ``` ```` -#### Option syntax +## Code block options + +You can add meta options to your code blocks to customize their appearance. + + + You must specify a programming language for a code block before adding any other meta options. + + +### Option syntax * **String and boolean options**: Wrap with `""`, `''`, or no quotes. * **Expression options**: Wrap with `{}`, `""`, or `''`. -## Syntax highlighting +### Syntax highlighting Enable syntax highlighting by specifying the programming language after the opening backticks of a code block. +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. + ```java class HelloWorld { public static void main(String[] args) { @@ -65,11 +75,7 @@ class HelloWorld { ``` ```` -### Languages - -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. - -## Title +### Title Add a title after the programming language to label your code example. Titles can be any string on a single line. ```javascript Code Block Example @@ -82,7 +88,7 @@ const hello = "world"; ``` ```` -## Icon +### Icon Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs. ```javascript icon="square-js" @@ -95,7 +101,7 @@ const hello = "world"; ``` ```` -## Line Highlighting +### Line Highlighting Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight. ```javascript Line Highlighting Example highlight={1-2,5} @@ -116,7 +122,7 @@ sayHello(); ``` ```` -## Line focusing +### Line focusing Focus on specific lines in your code blocks using `focus` with line numbers or ranges. ```javascript Line Focus Example focus={2,4-5} @@ -137,7 +143,7 @@ sayHello(); ``` ```` -## Show line numbers +### Show line numbers Display line numbers on the left side of your code block using `lines`. ```javascript Show Line Numbers Example lines @@ -158,7 +164,7 @@ sayHello(); ``` ```` -## Expandable +### Expandable Allow users to expand and collapse long code blocks using `expandable`. ```python Expandable Example expandable @@ -264,7 +270,7 @@ if __name__ == "__main__": ``` ```` -## Wrap +### Wrap Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read. ```javascript Wrap Example wrap From 2e5b7e5fcf2232b88650955f5473bcf428983674 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 12:46:28 -0700 Subject: [PATCH 19/21] add more options to code block example --- code.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code.mdx b/code.mdx index c3ac244a1..0e7367f7c 100644 --- a/code.mdx +++ b/code.mdx @@ -21,7 +21,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`). 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. -```java HelloWorld.java +```java HelloWorld.java lines icon="java" class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); @@ -30,7 +30,7 @@ class HelloWorld { ``` ````mdx -```java HelloWorld.java +```java HelloWorld.java lines icon="java" class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); From 63791e36d2103538bf9d3c6abde8db5630c22626 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 13:17:23 -0700 Subject: [PATCH 20/21] add links to icon libraries --- code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code.mdx b/code.mdx index 988992f7c..37afa57cf 100644 --- a/code.mdx +++ b/code.mdx @@ -89,7 +89,7 @@ const hello = "world"; ```` ### Icon -Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs. +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. ```javascript icon="square-js" const hello = "world"; From 17e817c0632d74773dff8f1c951e3dd283956707 Mon Sep 17 00:00:00 2001 From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Date: Wed, 11 Jun 2025 13:42:46 -0700 Subject: [PATCH 21/21] fix heading --- code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code.mdx b/code.mdx index 37afa57cf..a8edeb3f7 100644 --- a/code.mdx +++ b/code.mdx @@ -17,7 +17,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (\`). To denote a `word` or `phrase` as code, enclose it in backticks (`). ``` -### Code block +### Code blocks 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.