# Code Blocks

The mx-code component renders code snippets with syntax highlighting (via Prism (opens new window)) and (optionally) line numbers.

For code that is unescaped, it is safer to pass it into the component via the code prop. Otherwise, it can simply be placed in the default slot. The language must be specified via the language prop in order for syntax highlighting to function.

const language = 'js'

{ "json": "json" }

/* This CSS example has line numbers. */ .danger { color: #f00; }

@@ -2,3 +2,3 @@ // This example has diff highlighting. - let dude = 'Lebowski'; + const dude = 'Lebowski'; console.log(`The ${dude} abides`);

# Source for the above examples:

<mx-code language="html" code="<p>HTML&nbsp;Example</p>" />
<mx-code language="js">
  const language = 'js'
</mx-code>
<mx-code language="json">
  {
    "json": "json"
  }
</mx-code>
<mx-code language="css" show-line-numbers line-number-start="237">
  /* This CSS example has line numbers. */
  .danger {
    color: #f00;
  }
</mx-code>
<mx-code language="diff-typescript">
  @@ -2,3 +2,3 @@
    // This example has diff highlighting.
  - let dude = 'Lebowski';
  + const dude = 'Lebowski';
    console.log(`The ${dude} abides`);
</mx-code>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Supported languages

The following keywords are currently supported for the language prop:

atom, clike, css, diff, html, javascript, js, json, markup, mathml, rss, ruby, sql, ssml, svg, ts, typescript, xml

# mx-code

# Properties

Property	Attribute	Description	Type	Default
`code`	`code`	Unescaped code to format and display. Escaped code may be placed inside the default slot instead.	`string`	`undefined`
`language`	`language`	The language of the code. Add a `diff-` prefix for diff highlighting. See Supported languages	`string`	`'none'`
`lineNumberStart`	`line-number-start`		`number`	`1`
`showLineNumbers`	`show-line-numbers`		`boolean`	`false`

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Chips Comments →