mirror of
https://github.com/thangisme/notes.git
synced 2024-09-01 12:24:33 -04:00
2.0 KiB
2.0 KiB
layout | title | parent | nav_order |
---|---|---|---|
default | Code | UI Components | 6 |
Code
{: .no_toc }
Table of contents
{: .no_toc .text-delta }
- TOC {:toc}
Inline code
Code can be rendered inline by wrapping it in single back ticks.
Lorem ipsum dolor sit amet, `` 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'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...
Link button{: .btn }
Link button{: .btn }