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><section>< /code> should be wrapped as inline.html
Basic block
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<pre>Sample text here...< /pre>html
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>html
Variables
For indicating variables use the <var> tag.
y = mx + b
<var>y< /var> = <var>m< /var><var>x< /var> + <var>b< /var>html
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>html
Syntax highlighter
theDocs uses PrismJs for syntax highlighting 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>
Simple code view
Just add .simple-view class to the <pre> tag to have a code view like below one.
<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-gray class.
A paragraph with .text-dark class.
Copy<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-gray">A paragraph with .text-gray class.< /p>
<p class="text-dark">A paragraph with .text-dark class.< /p>
Copy.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; }
Copy$('.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:
Copy<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 splitted
Wrap your code and preview inside <div class="code-splitted">...</div> to show them horizontally in two side.
Copy<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-gray">A paragraph with .text-gray class.< /p>
<p class="text-dark">A paragraph with .text-dark class.< /p>
Copy.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; }
Copy$('.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);
});
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-gray class.
A paragraph with .text-dark class.
Here is the code which we used to draw above code splitted:
Copy<div class="code-splitted">
<div class="code-group col-md-7">
<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>
<div class="code-preview col-md-5">
...
< /div>
< /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-gray class.
A paragraph with .text-dark class.
Copy<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-gray">A paragraph with .text-gray class.< /p>
<p class="text-dark">A paragraph with .text-dark class.< /p>html
Copy.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; }css
Copy$('.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);
});javascript
Here is the code which we used to draw above code snippet:
Copy<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>
Helper classes
Each <pre> tag would accept two modifier class:
.no-copy: Remove copy button.no-name: Remove language name which is located beside copy button
