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.
Simple code blocks
Here is basic usage of tags like code
, pre
, kbd
, var
and samp
.
Inline
Wrap inline snippets of code with <code>
.
<section>
should be wrapped as inline.For example, <code><section></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 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.
<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.
<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
.