mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-23 11:32:22 -06:00
107 lines
2.6 KiB
Markdown
107 lines
2.6 KiB
Markdown
---
|
|
layout: default
|
|
title: Code
|
|
parent: UI Components
|
|
has_children: true
|
|
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.
|
|
|
|
## Heading with `<inline code snippet>` in it.
|
|
{: .no_toc }
|
|
</div>
|
|
```markdown
|
|
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
## Heading with `<inline code snippet>` in it.
|
|
```
|
|
|
|
---
|
|
|
|
## 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 %}
|
|
|
|
---
|
|
|
|
## Mermaid diagram code blocks
|
|
|
|
[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. You can turn on support for mermaid by adding `mermaid_enabled: true` to your \_config.yml.
|
|
|
|
The markdown for a simple flowchart example might look like the following:
|
|
|
|
{% highlight markdown %}
|
|
```mermaid
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
```
|
|
{% endhighlight %}
|