Test Page

This is a summary paragraph for the test page. This test page employs as many different supported HTML tags and styles available through markdown. Where possible, some examples of custom classes and styles are also shown. There will be several pages (links to be provided later) that will demonstrate various layout controls and page structure controls including dark/light mode support, mobile support through media queries and other very specific examples using flex-box controls. The primary goal of this paragraph is to provide sufficient text to trigger text wrapping to preview line-height setting and automatic element height scaling.

This is a second paragraph, much shorter, to illustrate the spacing between multiple paragraphs.

Including the current section, all other sections of this document follow the same format. An h1 tag with the name of the section identified. An hr tag using --- beneath the heading. Finally the example content.

More information about Markdown can be learned at the Markdown Cheatsheet. Let's take a look at some examples now.

Heading Styles

Directly above (and below) is an H1.

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Common markup

Paragraphs and Links

This is a standard paragraph. You have seen examples of this at the top of the page so there is no need to go in to more.

This is a paragraph with a link to localhost. It also has a link to Google. This is a link wrapped in code backticks.

Blockquotes

Blockquotes are handy for referencing specific content within a page, typically a quote from someone aside from the article's author who can be quoted directly.

"Always listen to experts. They'll tell you what can't be done, and why. Then do it."

Robert A. Heinlein, Time Enough for Love

Inline emphasis and bold

Text can be converted to italics or made bold or even bold italics by wrapping the text in 1, 2 or 3 asterisks (*), respectively. Text can be made into inline code tags by wrapping the text in backticks, (`).

Listing tags

An unordered list

• List item 1
  • Sub-list item 1
  • Sub-list item 2
• List item 2
  • Sub-list item 1
    • Sub sub-list item 1
• List item 3

An ordered list

NOTE: For ordered lists. To create a list that has items nested deeper than two levels, you must use four spaces to indent instead of the normal two spaces.

1. Root item 1
   1. Sub item 1.1
   2. Sub item 1.2
      1. Sub sub item 1.2.1
2. Root item 2

A dictionary list

Definition or dictionary lists can be created using directly embedding the appropriate HTML.

HTML

Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

CSS

Cascading Style Sheets, is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Tables

Tables use vertical bars | and hyphens - to divide the content into columns and separate column headings from data rows, respectively.

Collapsible content

This uses the <details> and <summary> tags to create a section of content that collapses and opens to show or hide content on demand.

Code

Large code samples may be rendered using fenced code blocks, or 3 backticks (`) above and below the block of code. If you immediately follow the opening 3 backticks with a valid language name, the markdown interpreter will attempt to provide syntax highlighting relevant to the code block.

Example using Rust

// `vst` uses macros, so we'll need to specify that we're using them!
#[macro_use]
extern crate vst;

// We're implementing a trait `Plugin` that does all the VST-y stuff for us.
impl Plugin for Whisper {
    fn get_info(&self) -> Info {
        Info {
            name: "Whisper".to_string()
        }
    }
}

Example using HTML

<div class='filename'>
  <div>src/lib.rs</div>
</div>

Filenames may be associated with code blocks using a custom HTML.

<div class="filename" data-language="html">filename-example.html</div>