Skip to content

Instantly share code, notes, and snippets.

@ajaxray

ajaxray/slatedocs_middle_clumn_code.md

Created February 7, 2023 20:03
Show Gist options
  • Save ajaxray/a1c0ad3be0cde86f1eaa047486deec63 to your computer and use it in GitHub Desktop.
Save ajaxray/a1c0ad3be0cde86f1eaa047486deec63 to your computer and use it in GitHub Desktop.
Download ZIP
How to show multiline code or JSON in the middle column in slatedocs/slate API Documentation
Raw
slatedocs_middle_clumn_code.md

Showing multiline code or JSON in the middle column of slatedocs/slate API Documentation

Slate comes with 3 built in aside class (i.e. notice, warning and success) for showing blocked notes.

Let's a new aside class pre, that will show preformatted code in the middle column.

At the end of source/stylesheets/screen.css.scss, add the following lines:

// Style an aside like <pre> to show code in middle column
aside.pre {
  font-family: monospace;
  white-space: pre;
  background: #f0f0f0;
  padding-top: 0;
}

Now can use this class to show preformatted text in middle column like this:

<aside class="pre">
{
    "status": "completed",
    "is_anonymous": false
}
</aside>

It'll be displayed like this:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment