Test Markup Syntax Highlighting

January 1, 1900 9 minute read

This is a test page for me to see how my site renders

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.¹

Code in headings:

Heading 1 is the HTML equivalent of this: `<h1>Heading 1</h1>`

Heading 2 is the HTML equivalent of this: `<h2>Heading 2</h2>`

Heading 3 is the HTML equivalent of this: `<h3>Heading 3</h3>`

Heading 4 is the HTML equivalent of this: `<h4>Heading 4</h4>`

Heading 5 is the HTML equivalent of this: `<h5>Heading 5</h5>`

Heading 6 is the HTML equivalent of this: `<h6>Heading 6</h6>`

This is regular text.

Code in unordered list:

this is code
- this is code
  - this is code
this is code
- this is code
  - this is code

Code in ordered list:

This is regular text.

this is code
1. this is code
  1. this is code
this is code
1. this is code
  1. this is code

Code in a quote:

this is code

Code block in a quote:

git fetch 
git checkout main

Keyboard <kbd> HTML tag keys:

This:

Press <kbd>Windows</kbd> + <kbd>D</kbd> to toggle the showing or hiding of all windows in Linux Ubuntu.

> Press <kbd>Windows</kbd> + <kbd>D</kbd> to toggle the showing or hiding of all windows in Linux Ubuntu.

…renders as this:

Press Windows + D to toggle the showing or hiding of all windows in Linux Ubuntu.

Press Windows + D to toggle the showing or hiding of all windows in Linux Ubuntu.

Check the rendering of <kbd> tags inside headings too:

Heading 1: press `Windows` + `D`. Here is `some code`.

Heading 2: press `Windows` + `D`. Here is `some code`.

Heading 3: press `Windows` + `D`. Here is `some code`.

Heading 4: press `Windows` + `D`. Here is `some code`.

Heading 5: press `Windows` + `D`. Here is `some code`.

Heading 6: press `Windows` + `D`. Here is `some code`.

Regular text: press Windows + D. Here is some code.
Italic text: press Windows + D. Here is some code.
Bold text: press Windows + D. Here is some code.
Bold and italic: press Windows + D. Here is some code.

NB: even though the below HTML tags are using markdown="1" in them to try to make some code render properly, per this answer here, it’s not working in these tags. :( I don’t know why.

~~Strikethrough text: press Windows + D. Here is `some code`.~~

Red text: press Windows + D. Here is `some code`.

Green text: press Windows + D. Here is `some code`.

Blue text: press Windows + D. Here is `some code`.

GFM Code Blocks

GitHub Flavored Markdown fenced code blocks are supported. To modify styling and highlight colors edit /_sass/syntax.scss.

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

.highlight {
  margin: 0;
  padding: 1em;
  font-family: $monospace;
  font-size: $type-size-7;
  line-height: 1.8;
}

<nav class="pagination" role="navigation">
  {% if page.previous %}
    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
  {% endif %}
  {% if page.next %}
    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
  {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Code Blocks in Lists

GS-added: some code in a list:

Here is the C code:

From here: c/timinglib.c in my eRCaGuy_hello_world repo:

 /*
 This file is part of eRCaGuy_hello_world: https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world

 See the .h file for details.

 References:
 1. MY ANSWER WITH THIS CODE: Get a timestamp in C in microseconds? -
    https://stackoverflow.com/a/67731965/4561887
 1. <time.h> header: https://en.cppreference.com/w/c/chrono
 1. https://en.cppreference.com/w/c/chrono/timespec_get
 1. https://linux.die.net/man/3/clock_gettime
 1. *****+https://man7.org/linux/man-pages/man3/clock_gettime.3.html
     1. Shows the requirement for "_POSIX_C_SOURCE >= 199309L" in order to obtain
        access to these functions!: `clock_getres()`, `clock_gettime()`, `clock_settime()`.
     1. See definitions for all of the clock types here, too, such as `CLOCK_REALTIME`,
        `CLOCK_MONOTONIC`, `CLOCK_MONOTONIC_RAW`, etc.

 */


 /// Comment this define out to use the C `timespec_get()` instead of the better Linux and POSIX
 /// `clock_gettime()`.
 /// Note: `clock_gettime()` (see references above) is better that `timespec_get()`. However,
 /// `clock_gettime()` is only available on Linux and POSIX systems, whereas `timespec_get()` is a
 /// generic C function.
 #define USE_CLOCK_GETTIME

 /// The clock to use for underlying timing functions. I recommend `CLOCK_MONOTONIC` or
 /// `CLOCK_MONOTONIC_RAW`. For details on the various clock types, see:
 /// https://man7.org/linux/man-pages/man3/clock_gettime.3.html.
 /// Note that `CLOCK_MONOTONIC_RAW` does NOT work with `clock_nanosleep()`, or else I'd prefer the
 /// `CLOCK_MONOTONIC_RAW` clock over the `CLOCK_MONOTONIC` clock.
 #define CLOCK_TYPE CLOCK_MONOTONIC

 #ifdef USE_CLOCK_GETTIME
     // This line **must** come **before** including <time.h> in order to bring in
     // the POSIX functions such as `clock_gettime()`, `nanosleep()`, etc., from
     // `<time.h>`! See: https://man7.org/linux/man-pages/man2/clock_nanosleep.2.html
     #define _POSIX_C_SOURCE 200112L

     #define GET_TIME(timespec_ptr) clock_gettime(CLOCK_TYPE, (timespec_ptr))
 #else
     #define GET_TIME(timespec_ptr) timespec_get((timespec_ptr), TIME_UTC)
 #endif

 // Local includes
 #include "timinglib.h"

 // Linux includes
 #include <pthread.h>
 #include <sys/mman.h> // `mlockall()` https://man7.org/linux/man-pages/man2/mlock.2.html

 // C includes
 #include <errno.h>  // `errno`
 #include <stdint.h> // `UINT64_MAX`
 #include <stdio.h>  // `printf()`
 #include <string.h> // `strerror(errno)`
 #include <time.h>   // `clock_gettime()` and `timespec_get()`


 uint64_t millis()
 {
     struct timespec ts;
     GET_TIME(&ts);
     uint64_t ms = SEC_TO_MS((uint64_t)ts.tv_sec) + NS_TO_MS((uint64_t)ts.tv_nsec);
     return ms;
 }

 uint64_t micros()
 {
     struct timespec ts;
     GET_TIME(&ts);
     uint64_t us = SEC_TO_US((uint64_t)ts.tv_sec) + NS_TO_US((uint64_t)ts.tv_nsec);
     return us;
 }

 uint64_t nanos()
 {
     struct timespec ts;
     GET_TIME(&ts);
     uint64_t ns = SEC_TO_NS((uint64_t)ts.tv_sec) + (uint64_t)ts.tv_nsec;
     return ns;
 }

 uint64_t get_estimated_resolution()
 {
     // Obtain a bunch of measurements as fast as possible, then let's see the gap between them.

     // Note: for a large linux computer, 10000 produces really consistent results. To be fast,
     // however, even **10** produces fine results. So, use whatever number you want here between
     // about 10 and 1 Million.
     #define NUM_MEASUREMENTS 1000
     // statically allocate this array to keep this memory off both the stack and the heap, so that
     // it can be HUGE if I want (ex: 100 Million elements--which takes about 2 seconds)! Otherwise,
     // I'm limited to ~8 MB on the stack--see my answer here:
     // https://stackoverflow.com/a/64085509/4561887
     static struct timespec ts_array[NUM_MEASUREMENTS];

     // rapidly obtain back-to-back timestamps
     for (size_t i = 0; i < ARRAY_LEN(ts_array); i++)
     {
         GET_TIME(&ts_array[i]);
     }

     // Obtain an array of all of the time differences: delta time array, in nanosecond time deltas
     // uint64_t dt_array_ns[NUM_MEASUREMENTS];
     uint64_t t_old_ns = SEC_TO_NS((uint64_t)ts_array[0].tv_sec) + (uint64_t)ts_array[0].tv_nsec;
     uint64_t min_dt_ns = UINT64_MAX;
     for (size_t i = 0; i < ARRAY_LEN(ts_array); i++)
     {
         uint64_t t_new_ns = SEC_TO_NS((uint64_t)ts_array[i].tv_sec) + (uint64_t)ts_array[i].tv_nsec;
         // dt = delta time
         uint64_t dt_ns = t_new_ns - t_old_ns;
         t_old_ns = t_new_ns;
         // dt_array_ns[i] = dt_ns;

         // debugging; result: mostly ~23~24 ns; occasionally ~1000 ns (1 us)
         // printf("%lu ns\n", dt_ns);

         if (dt_ns > 0 && dt_ns < min_dt_ns)
         {
             min_dt_ns = dt_ns;
         }
     }

     return min_dt_ns;
 }

And some Python code:

From python/hello_world.py in my eRCaGuy_hello_world repo:

 #!/usr/bin/env python3

 """
 This file is part of eRCaGuy_hello_world:
 https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world

 (description)
 Status: (status)

 keywords: (keywords)

 Check this script with `pylint` v2.0.0 or later. See "eRCaGuy_hello_world/python/README.md" for
 installation instructions to install the latest version from GitHub.
 For a list of all error codes, such as `C0301`, `C0116`, `W0105`, etc., see here:
 https://pylint.pycqa.org/en/latest/messages/messages_list.html
 ```bash
 pylint hello_world.py
 ```

 Run command:
 ```bash
 ./hello_world.py
 # OR
 python3 hello_world.py
 ```

 References:
 1.

 """


 def main():
     """
     The main function of this program.
     """
     print("Hello world!")


 # Only run `main()` if this script is **run**, NOT imported
 if __name__ == '__main__':
     main()



 # pylint: disable-next=pointless-string-statement
 """
 SAMPLE OUTPUT:

     eRCaGuy_hello_world/python$ ./hello_world.py
     Hello world!

 """

Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., 1.). Usually this will mean indenting 3 spaces instead of 4.

Do step 1.

Now do this:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Now you can do this.

Jekyll Highlight Tag

An example of a code blocking using Jekyll’s {% highlight %} tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 'gulp html' -- does nothing
// 'gulp html --prod' -- minifies and gzips HTML files for production
gulp.task('html', () => {
  return gulp.src(paths.siteFolderName + paths.htmlPattern)
    .pipe(when(argv.prod, htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: false,
      removeAttributeQuotes: false,
      removeRedundantAttributes: false,
      minifyJS: true,
      minifyCSS: true
    })))
    .pipe(when(argv.prod, size({title: 'optimized HTML'})))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
    .pipe(when(argv.prod, gzip({append: true})))
    .pipe(when(argv.prod, size({
      title: 'gzipped HTML',
      gzip: true
    })))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
});

1
2
3
4
Module[{},
  Sqrt[2]
  4
]

GitHub Gist Embed

An example of a Gist embed below.

http://en.wikipedia.org/wiki/Syntax_highlighting ↩

Share on

Twitter Facebook LinkedIn

Comments are powered by Utterances. A free GitHub account is required. Comments are moderated. Be respectful. No swearing or inflammatory language. No spam.
I reserve the right to delete any inappropriate comments. All comments for all pages can be viewed and searched online here.

To edit or delete your comment: click the "Comments" link at the top of the comments section below where it says how many comments have been left (this will take you to a GitHub page with all comments for this page) --> find your comment on this GitHub page and click the 3 dots in the top-right --> click "Edit" or "Delete". Editing or adding a comment from the GitHub page also gives you a nicer editor.

Gabriel Staples

Test Markup Syntax Highlighting

This is a test page for me to see how my site renders

Heading 1 is the HTML equivalent of this: `<h1>Heading 1</h1>`

Heading 2 is the HTML equivalent of this: `<h2>Heading 2</h2>`

Heading 3 is the HTML equivalent of this: `<h3>Heading 3</h3>`

Heading 4 is the HTML equivalent of this: `<h4>Heading 4</h4>`

Heading 5 is the HTML equivalent of this: `<h5>Heading 5</h5>`

Heading 6 is the HTML equivalent of this: `<h6>Heading 6</h6>`

Heading 1: press `Windows` + `D`. Here is `some code`.

Heading 2: press `Windows` + `D`. Here is `some code`.

Heading 3: press `Windows` + `D`. Here is `some code`.

Heading 4: press `Windows` + `D`. Here is `some code`.

Heading 5: press `Windows` + `D`. Here is `some code`.

Heading 6: press `Windows` + `D`. Here is `some code`.

GFM Code Blocks

Code Blocks in Lists

Jekyll Highlight Tag

GitHub Gist Embed

Share on

Leave a comment

You may also enjoy

Tutorial: Getting started with `ydotool` to automate key presses (or mouse movements) in Linux

My propeller thrust articles

Common ways to fix video driver (and related) issues in Linux Ubuntu

How to repair your MacBook when it won’t boot

Gabriel Staples

This is a test page for me to see how my site renders

Heading 1 is the HTML equivalent of this: <h1>Heading 1</h1>

Heading 2 is the HTML equivalent of this: <h2>Heading 2</h2>

Heading 3 is the HTML equivalent of this: <h3>Heading 3</h3>

Heading 4 is the HTML equivalent of this: <h4>Heading 4</h4>

Heading 5 is the HTML equivalent of this: <h5>Heading 5</h5>

Heading 6 is the HTML equivalent of this: <h6>Heading 6</h6>

Heading 1: press Windows + D. Here is some code.

Heading 2: press Windows + D. Here is some code.

Heading 3: press Windows + D. Here is some code.

Heading 4: press Windows + D. Here is some code.

Heading 5: press Windows + D. Here is some code.

Heading 6: press Windows + D. Here is some code.

GFM Code Blocks

Code Blocks in Lists

Jekyll Highlight Tag

GitHub Gist Embed

Share on

Leave a comment

You may also enjoy

Tutorial: Getting started with ydotool to automate key presses (or mouse movements) in Linux

My propeller thrust articles

Common ways to fix video driver (and related) issues in Linux Ubuntu

How to repair your MacBook when it won’t boot

Heading 1 is the HTML equivalent of this: `<h1>Heading 1</h1>`

Heading 2 is the HTML equivalent of this: `<h2>Heading 2</h2>`

Heading 3 is the HTML equivalent of this: `<h3>Heading 3</h3>`

Heading 4 is the HTML equivalent of this: `<h4>Heading 4</h4>`

Heading 5 is the HTML equivalent of this: `<h5>Heading 5</h5>`

Heading 6 is the HTML equivalent of this: `<h6>Heading 6</h6>`

Heading 1: press `Windows` + `D`. Here is `some code`.

Heading 2: press `Windows` + `D`. Here is `some code`.

Heading 3: press `Windows` + `D`. Here is `some code`.

Heading 4: press `Windows` + `D`. Here is `some code`.

Heading 5: press `Windows` + `D`. Here is `some code`.

Heading 6: press `Windows` + `D`. Here is `some code`.

Tutorial: Getting started with `ydotool` to automate key presses (or mouse movements) in Linux