1
0
mirror of https://github.com/thangisme/notes.git synced 2024-10-31 17:07:35 -04:00
notes/docs/ui-components/code.md
2019-01-14 14:43:29 -05:00

83 lines
2.0 KiB
Markdown

---
layout: default
title: Code
parent: UI Components
nav_order: 6
---
# Code
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Inline code
Code can be rendered inline by wrapping it in single back ticks.
<div class="code-example" markdown="1">
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
```markdown
Lorem ipsum dolor sit amet, `<inline code snippet>` 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:
<div class="code-example" markdown="1">
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
</div>
{% 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's 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...
<div class="code-example" markdown="1">
<div class="code-example" markdown="1">
[Link button](http://example.com/){: .btn }
</div>
```markdown
[Link button](http://example.com/){: .btn }
```
</div>
{% highlight markdown %}
<div class="code-example" markdown="1">
[Link button](http://example.com/){: .btn }
</div>
```markdown
[Link button](http://example.com/){: .btn }
```
{% endhighlight %}