Tutorial Template Preview

Template CSS test-ground and features overview

This is a preview of pandoc’s html5 “Tutorial” template: “tutorial.template.html”. The template is used within The PureBASIC Archives for converting to HTML tutorials with multiple source files (markdown + yaml).

Use this page for testing CSS changes.

For instruction on how to use and convert the template, see:

Typography

This section offers a quick preview of how CSS styles are rendered via the Tutorial pandoc template.

Inline styles

This is paragraph, with some bold words, some italic words, and a striked out sentence. Now a sample of inline code.

Extra features: highlighted text, and keystrokes: CtrlC — for these, you’ll need to use raw html tags in markdown sources:

Headers

This is how headers are rendered:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Lists

Ordered (numbered) list:

  1. fruits
    1. oranges
    2. apples
    3. bananas
  2. vegetables
    1. cabbage
    2. peas
    3. potatos

Unordered (bullet) list:

Block Elements

Blockquotes

This is a <blockquote> quotation. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. SHITR

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

A NESTED QUOTE. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Tables

HEADER 1HEADER 2
First Row — Cell 1Cell 2
Second Row — Cell 1Cell 2
Third Row — Cell 1Cell 2

Alerts

Alerts are an extra feature to display boxed contents intended to catch the user’s attention. In Markdown, you’ll need raw html div tags to enable alerts.

NOTE: This is a basic alert box, intended for Notes.

Markdown contents is wrapped in a <div class="alert">.

TIP: This is an info alert box, intended for Information notes, Tips, ecc.

Markdown contents is wrapped in a <div class="alert alert-info">.

WARNING: This is a warning alert box.

Markdown contents is wrapped in a <div class="alert alert-warn">.

WRONG: This is an error alert box to warn users about anything that is wrong, negative, risky, ecc.

Markdown contents is wrapped in a <div class="alert alert-error">.

RIGHT: This is a success alert box to warn users about anything that is positive, correct, working, ecc.

Markdown contents is wrapped in a <div class="alert alert-success">.

Source Code Highlighting

Source code highlighting is achieved through a custom Higlighlight.js (PureBASIC mod version) build.

Languages are added to the bundle on a per-need basis: when a new html document in the PureBASIC archives requires a language missing in the current HLJS-PB bundle, it gets added. This is done to keep the weight of the HLJS file to the bare minimum required for the project.

Currently, the bundled languages are:

The goal is to have each language employ a custom CSS color theme. Practically, this has been achieved only for some languages; the others use a fallback theme (monokai-sublime) in the meantime.

PureBASIC

PureBASIC CSS Theme based on the original purebasic.css by Tristano Ajmone (extended to include PB mod extra lang token).

Enumeration Test 3 Step 10
  #Constant_One ; Will be 3
  #Constant_Two ; Will be 13
EndEnumeration

A.i = #Constant_One
B = A + 3

STRING.s = SomeProcedure("Hello World", 2, #Empty$, #Null$)
ESCAPED_STRING$ = ~"An escaped (\\) string!\nNewline..."

FixedString.s{5} = "12345"

Macro XCase(Type, Text)
  Type#Case(Text)
EndMacro

StrangeProcedureCall ("This command is split " +
                      "over two lines") ; Line continuation example

If B > 3 : X$ = "Concatenation of commands" : Else : X$ = "Using colons" : EndIf

Declare.s Attach(String1$, String2$)

Procedure.s Attach(String1$, String2$)
  ProcedureReturn String1$+" "+String2$
EndProcedure

PureBASIC Pseudocode

PureBASIC Pseudocode is and additional CSS class used with syntax-usage examples.

Interface  [Extends ]
  [Procedure1]
  [Procedure2]
  ...
EndInterface

To enable PB Pseudocode in HTML, add “pseudocode” after “purebasic” (separated by a space) in the class attribute of the <code> tag:

<pre class="purebasic pseudocode"><code>

In Pandoc’s markdown, you can use this syntax (which might not work with other markdown parsers):

 ``` {.purebasic .pseudocode}

For other markdown flavors/parsers, check the relevant documentation. Basically, what you want to achieve is to have both “purebasic” and “pseudocode” to appear as classnames in the final html’s <code> tag.

Most likely, you’ll have to resort to raw HTML tags within your markdown source in order to achieve this (this is the way it’s being done in this document, which uses GFM).

FASM

NOTE 1: Currently, the FASM language definition (fasm.js) is just a copy of x86asm.js (highlight.js’s gerneric language definition for Intel x86 Assembly), so it doesn’t render FASM syntax 100% correctly. In due time, the language definition will be tweaked to become FASM-specific and fully compliant. I’ve chosen to early-adopt a renamed version of x86asm.js file to avoid having to change — in the future — all language class attributes in source documents.

NOTE 2: The current theme uses xterm’s color palette. I wanted to provide an old-school look to FASM syntax. But the theme palette will change when the language definition shall be completed.

; Beer - example of tiny (one section) Win32 program

format PE GUI 4.0

include 'win32a.inc'

; no section defined - fasm will automatically create .flat section for both
; code and data, and set entry point at the beginning of this section

    invoke  MessageBoxA,0,_message,_caption,MB_ICONQUESTION+MB_YESNO
    cmp eax,IDYES
    jne exit

    invoke  mciSendString,_cmd_open,0,0,0
    invoke  mciSendString,_cmd_eject,0,0,0
    invoke  mciSendString,_cmd_close,0,0,0

exit:
    invoke  ExitProcess,0

_message db 'Do you need additional place for the beer?',0
_caption db 'Desktop configuration',0

_cmd_open db 'open cdaudio',0
_cmd_eject db 'set cdaudio door open',0
_cmd_close db 'close cdaudio',0

; import data in the same section

data import

 library kernel32,'KERNEL32.DLL',\
     user32,'USER32.DLL',\
     winmm,'WINMM.DLL'

 import kernel32,\
    ExitProcess,'ExitProcess'

 import user32,\
    MessageBoxA,'MessageBoxA'

 import winmm,\
    mciSendString,'mciSendStringA'

end data

(example taken from FASM for Windows distribution package, examples folder, BEER.ASM)

Bash

Custom CSS theme by Tristano Ajmone, based on xterm default palette.

#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
 echo "Superuser rights required"
 exit 2
fi

genApacheConf(){
 echo -e "# Host ${HOME_DIR}$1/$2 :"
}

DOS .bat

NOTE: Currently there is no custom CSS definition for this language.

cd \
copy a b
ping 192.168.0.1
@rem ping 192.168.0.1
net stop sharedaccess
del %tmp% /f /s /q
del %temp% /f /s /q
ipconfig /flushdns
taskkill /F /IM JAVA.EXE /T

cd Photoshop/Adobe Photoshop CS3/AMT/
if exist application.sif (
    ren application.sif _application.sif
) else (
    ren _application.sif application.sif
)

taskkill /F /IM proquota.exe /T

sfc /SCANNOW

set path = test

xcopy %1\*.* %2

Ini

NOTE: Currently there is no custom CSS definition for this language.

; boilerplate
[package]
name = "some_name"
authors = ["Author"]
description = "This is \
a description"

[[lib]]
name = ${NAME}
default = True
auto = no
counter = 1_000

Markdown

NOTE: Currently there is no custom CSS definition for this language.

# hello world

you can write text [with links](http://example.com) inline or [link references][1].

* one _thing_ has *em*phasis
* two __things__ are **bold**

[1]: http://example.com

---

# hello world

<this_is inline="xml"></this_is>

> markdown is so cool

    so are code segments

1. one thing (yeah!)
2. two thing `i can write code`, and `more` wipee!

XML

This language covers both XML and HTML syntax.

NOTE: Currently there is no custom CSS definition for this language.

<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

CSS

NOTE: Currently there is no custom CSS definition for this language.

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

YAML

NOTE: Currently there is no custom CSS definition for this language.

---
# comment
string_1: "Bar"
string_2: 'bar'
string_3: bar
inline_keys_ignored: sompath/name/file.jpg
keywords_in_yaml:
  - true
  - false
  - TRUE
  - FALSE
  - 21
  - 21.0
  - !!str 123
"quoted_key": &foobar
  bar: foo
  foo:
  "foo": bar

reference: *foobar

multiline_1: |
  Multiline
  String
multiline_2: >
  Multiline
  String
multiline_3: "
  Multiline string
  "

ansible_variables: "foo {{variable}}"

array_nested:
- a
- b: 1
  c: 2
- b
- comment
...