Page to check CSS theme

A page containing all the formatting I use, to check that I haven't messed things up when changing CSS.

The built-in themes on Github Pages use a standard file to demonstrate their styles. For example, modernist theme.

I took that file, made some changes, and find it to be a good reference when changing the CSS or adding features (to make sure I haven’t screwed anything up).

Then there is a HR:

Text can be bold, italic, or strikethrough.

Link to another page.

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.


Footnotes1 should show up correctly2.

Header 1 (link)

This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

Indicating that something is OK:

Not sure that I would use this much…

Or giving some info:

You should note this.
Long lines should look right if they go all the way over to the right side of this box and run up against the edge.

Or providing a warning:

Don’t tell me you weren’t warned…

This should handle multiple paragraphs too

Or showing an error:

Error! Error! Abandon ship!

Kidding, it’s fine

Javascript with syntax highlighting (and file name):

// Javascript code with syntax highlighting
function foo(x) { x = (typeof x != "undefined") ? x : 10; .. }
function foo(x = 10) { .. }

function foo(x,y,z) { .. }; foo.apply(null,[1,2,3]);
function foo(x,y,z) { .. }; foo(...[1,2,3]);

function foo() { var args = []; .. }
function foo(...args) { .. }

var o = { x: 2, y: 3 }, x = o.x, y = o.y, z = (typeof o.z != "undefined") ? o.z : 10;
var { x, y, z = 10 } = { x: 2, y: 3 };

var a = [1,2], x = a[0], y = a[1], z = (typeof a[2] != "undefined") ? a[2] : 10;
var [x,y,z = 10] = [1,2];

var x = 10, y = 20, tmp = x; x = y; y = tmp;
var x = 10, y = 20; [y,x] = [x,y];

var a = [1,2,3], b = a.pop(); a = a.concat([4]); a; // [2,3,4]
var a = [1,2,3], [b, ...a] = [...a,4];

function foo(o) { var x = o.x, y = o.y; .. }; foo( {y:5,x:10} );
function foo({x,y}) { .. }; foo( {y:5,x:10} );

Ruby with syntax highlighting (with text above the code):

Some ruby code
# make some nice lexed html
source ='/etc/bashrc')
formatter =
lexer =

# Get some CSS
Rouge::Themes::Base16.mode(:light).render(scope: '.highlight')
# Or use Theme#find with string input
Rouge::Theme.find('base16.light').render(scope: '.highlight')

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")

Some bash with syntax highlighting (no header):

#!/usr/bin/env bash
# Count lines of code for the input files

# at least one file should be passed in
if [ "$#" -eq 0 ]
  echo_err "No input files given!"
  exit 1

# filter out *.swp files
valid_files=( $(echo "$@" | sed -E 's/[^[:space:]]+.swp//g') )

all_files="$(cat ${valid_files[*]})"
all_files_no_blank="$(echo "$all_files" | sed '/^[[:space:]]*$/ d')"
# strips comment lines starting with '#' and '//'
all_files_no_comments="$(echo "$all_files_no_blank" | sed '/^[[:space:]]*#/ d' | sed '/^[[:space:]]*\/\// d')"

# count lines for each (from
num_lines="$(echo -n "$all_files" | grep -c '^' )"
num_lines_no_blank="$(echo -n "$all_files_no_blank" | grep -c '^' )"
num_lines_no_comments="$(echo -n "$all_files_no_comments" | grep -c '^' )"

echo "Files          : ${#valid_files[@]}"
echo "Total lines    : $num_lines"
echo "No empty lines : $num_lines_no_blank"
echo "No comments    : $num_lines_no_comments"

Code with no syntax highlighting:

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
$ cat examples.txt
Short lines that don't wrap.
Or shouldn't, anyway.
  1. This is an ordered list following a header.
  2. This is an ordered list following a header.
  3. This is an ordered list following a header.

Table formatting:

head1 head two three
ok good swedish fish nice
out of stock good and plenty nice
ok good oreos hmm
ok good zoute drop yumm

There’s a horizontal rule below this.

Here is an unordered list:

And an ordered list:

  1. Item one
  2. Item two
  3. Item three
  4. Item four

And a nested list:

Small image

Should be centered, for all widths

small image


And can be displayed without a shadow box

small image

bidoof bidoof

Large image

Should be centered, and full-width

large image

This is how github works?

Definition lists can be used with HTML syntax.


(This was originally published on LinkedIn)

(See discussion of this post: Reddit, Reddit2)


  1. You should visit

  2. You may want to check out the Footnote Fanatics at I don’t actually know what this site is but it seems appropriate.