Code view

One of the most frequently used component of each documentation, is display a preview for a code snippet and describing it. In this page we will show different code view components of theDocs.

  1. Simple code blocks
    1. Inline
    2. Basic block
    3. User input
    4. Variables
    5. Sample output
  2. Syntax highlighter
    1. Supported languages
  3. Code wrappers
    1. Code window
    2. Code snippet

Simple code blocks

Here is basic usage of tags like code, pre, kbd, var and samp.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...
<pre>Sample text here...</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Variables

For indicating variables use the <var> tag.

y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Syntax highlighter

theDocs uses PrismJs to syntax highlight code snippets. You have to put your code inside <pre><code class="language-xxxx"> which xxxx is the name of language.


<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you need to include line numbers, add class .line-numbers to the <pre> tag.


<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

Supported languages

This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx class:

  • HTML/XML markup
  • CSS css
  • C-like clike
  • JavaScript javascript
  • ASP.NET (C#) aspnet
  • Bash bash
  • C c
  • C# csharp
  • C++ cpp
  • CoffeeScript coffeescript
  • Git git
  • HTTP http
  • Ini ini
  • Java java
  • LaTeX latex
  • Less less
  • MATLAB matlab
  • Objective-C objectivec
  • Perl perl
  • PHP php
  • Python python
  • Ruby ruby
  • Sass (Scss) scss
  • SQL sql
  • Swift swift

Code wrappers

If your code snippet includes several languages or a preview of result, it's better to use one of the following code wrappers.

Code window

Wrap your code and preview inside <div class="code-window">...</div> to show them in a window style with different tabs. In this way, reader can see one code snippet in a same time.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code window:


<div class="code-window">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code tabs

Wrap your code and preview inside <div class="code-tabs">...</div> to show them in a horizontal tab style.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code tabs:


<div class="code-tabs">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code snippet

Wrap your code and preview inside <div class="code-snippet">...</div> to show them in a vertical style. Use this style to show all of the codes in a same view.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code snippet:


<div class="code-snippet">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

As you can see, switching between three wrapper types is only by changing classes between .code-window, .code-snippet and .code-tabs.