Page to check CSS theme

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
# 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
# Example code
echo "Hello"
do_something() {
  something "arg1" "$var" 'ok'

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

Large image

Should be centered, and full-width

large image

Definition lists can be used with HTML syntax.



  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.