Highlight.js Examples

This page is an example (and test) page for the generated HLJS package.

Highlight.js Version: 9.8.0 “New York”, «PureBASIC Modded Fork».

Using HLJS

HLJS is capable of auto-detecting languages withing the <pre><code> blocks, but it’s advaisable to manually define the language – especially for readability of source code.

To define the language in html, assign the language name to the class attribute of the opening <code> tag of the <pre><code> block that wraps your source code:

<pre><code class="languagename">
[...your source code...]
</code></pre>

To define the language in markdown, type the language name after the opening backticks of the fenced code block that wraps your source code:

```languagename
[...your source code...]
```

Disable Highlighting (nohighlight)

If you want to ensure that <pre><code> block is not parsed by HLJS, use “nohighlight” instead of the language name.

A code block set to “nohighlight” will look something like this:

I am a code block with no highlighting.
Highlight.js will ignore me: no parsing, no highlighting tags added.

NOTE: The above block styling doesn’t derive by the HLJS generated stylesheet: it relies instead on the CSS definitions of the current document’s stylesheet, which defines a background color, padding, and some extra attributes.

It will be up to you to handle its appearance by adding some definitions in you CSS file:

pre.nohighlight code {
  [...your CSS...]
}

PureBASIC

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 used for syntax-usage examples.

Interface <Name1> [Extends <Name2>]
  [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’ll have to use this syntax (which might not work with other markdown parsers):

{.nohighlight} ```

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

Bash

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

#!/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

PowerShell

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

$initialDate = [datetime]'2013/1/8'

$rollingDate = $initialDate

do {
    $client = New-Object System.Net.WebClient
    $results = $client.DownloadString("http://not.a.real.url")
    Write-Host "$rollingDate.ToShortDateString() - $results"
    $rollingDate = $rollingDate.AddDays(21)
    $username = [System.Environment]::UserName
} until ($rollingDate -ge [datetime]'2013/12/31')

Diff

Index: languages/ini.js
===================================================================
--- languages/ini.js    (revision 199)
+++ languages/ini.js    (revision 200)
@@ -1,8 +1,7 @@
 hljs.LANGUAGES.ini =
 {
   case_insensitive: true,
-  defaultMode:
-  {
+  defaultMode: {
     contains: ['comment', 'title', 'setting'],
     illegal: '[^\\s]'
   },

*** /path/to/original timestamp
--- /path/to/new      timestamp
***************
*** 1,3 ****
--- 1,9 ----
+ This is an important
+ notice! It should
+ therefore be located at
+ the beginning of this
+ document!

! compress the size of the
! changes.

  It is important to spell

Makefile

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

# Makefile

BUILDDIR      = _build
EXTRAS       ?= $(BUILDDIR)/extras

.PHONY: main clean

main:
    @echo "Building main facility..."
    build_main $(BUILDDIR)

clean:
    rm -rf $(BUILDDIR)/*

JSON

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

[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]