notes/docs/ui-components/code.md

layout	title	parent	nav_order
default	Code	UI Components	5

Code

{:.no_toc}

Table of contents

{: .no_toc .text-delta }

1. TOC {:toc}

---

Inline code

Code can be rendered inline using single ticks by wrapping your code in single back ticks.

Lorem ipsum dolor sit amet, <inline code snippet> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

```markdown Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ```

---

Syntax highlighted code blocks

Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:

```js // Javascript code with syntax highlighting. var fun = function lang(l) { dateformat.i18n = require('./lang/' + l) return true; } ```

{% highlight markdown %} ```js // Javascript code with syntax highlighting. var fun = function lang(l) { dateformat.i18n = require('./lang/' + l) return true; } ``` {% endhighlight %}

---

Code blocks with rendered examples

To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the code-example class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the markdown="1" attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...

Link button{: .btn }

```markdown [Link button](http://example.com/){: .btn } ```

{% highlight markdown %}

Link button{: .btn }

```markdown [Link button](http://example.com/){: .btn } ``` {% endhighlight %}