Markup Code

Mostly used in documentation of shell command or SQL. The file public/assets/css/markup.css defines some custom CSS-rules for markup. Use prefered method (span or custom tags):

<div class="w3-code bash">
    <span>mkdir -p backup/server</span><br>
    <span>rsync -av user@server:~ backup/server</span><br>
</div>

<div class="w3-code">
    <bash>mkdir -p backup/server</bash><br>
    <bash>rsync -av user@server:~ backup/server</bash><br>
</div>

The output from this markup will be:

mkdir -p backup/server
rsync -av user@server:~ backup/server
mkdir -p backup/server
rsync -av user@server:~ backup/server

In addition to bash, custom CSS is defined for these common command line tools:

<div class="w3-code">
    <tcsh>mkdir -p backup/server</tcsh><br>
    <mysql>SELECT * FROM users</mysql><br>
    <psql>SELECT * FROM users</psql><br>
    <cmd>copy /y /q *.txt D:\Temp</cmd><br>
    <ps>Get-WmiObject -Query "Select * from Win32_Bios"</ps><br>
</div>

The output from this markup will be:

mkdir -p backup/server
SELECT * FROM users
SELECT * FROM users
copy /y /q *.txt D:\Temp
Get-WmiObject -Query "Select * from Win32_Bios"

A special sudo markup is also defined, currently these commands are displayed using a bash shell prompt.

<div class="w3-code sudo">
    <span>sudo groupadd -g 1050 compdept</span><br>
    <span>sudo gpasswd -a andlov compdept</span><br>
</div>

The output from this markup will be:

sudo groupadd -g 1050 compdept
sudo gpasswd -a andlov compdept

Benefit

In addition to colorize the prompt, it also let users to select text and copy without getting the prompt name mixed in.