diff --git a/code.mdx b/code.mdx index a8edeb3f7..789272e34 100644 --- a/code.mdx +++ b/code.mdx @@ -19,7 +19,7 @@ To denote a `word` or `phrase` as code, enclose it in backticks (`). ### 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. +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. ```java HelloWorld.java lines icon="java" class HelloWorld { @@ -49,10 +49,11 @@ You can add meta options to your code blocks to customize their appearance. ### Option syntax -* **String and boolean options**: Wrap with `""`, `''`, or no quotes. -* **Expression options**: Wrap with `{}`, `""`, or `''`. +- **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. 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. @@ -76,7 +77,8 @@ class HelloWorld { ```` ### Title -Add a title after the programming language to label your code example. Titles can be any string on a single line. + +Add a title to label your code example. Use `title="Your title"` or a string on a single line. ```javascript Code Block Example const hello = "world"; @@ -89,6 +91,7 @@ const hello = "world"; ```` ### Icon + 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" @@ -102,9 +105,10 @@ 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-2,5} +```javascript Line Highlighting Example highlight= {1-2,5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -123,9 +127,10 @@ sayHello(); ```` ### 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} +```javascript Line Focus Example focus= {2,4-5} const greeting = "Hello, World!"; function sayHello() { console.log(greeting); @@ -144,6 +149,7 @@ sayHello(); ```` ### Show line numbers + Display line numbers on the left side of your code block using `lines`. ```javascript Show Line Numbers Example lines @@ -165,6 +171,7 @@ sayHello(); ```` ### Expandable + Allow users to expand and collapse long code blocks using `expandable`. ```python Expandable Example expandable @@ -271,6 +278,7 @@ if __name__ == "__main__": ```` ### Wrap + Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read. ```javascript Wrap Example wrap