scottkirvan/scootermarkdownstyle

Testbed for developing and testing GitHub Pages stylesheets

ScottKirvan/ScooterMarkdownStyle

A testbed repo for GitHub Pages markdown styling.

View Demo · Documentation · Report Bug · Request Feature

This README file will serve as a test page for github pages/jekyll styling. If you already have a GitHub.io page set up, any additional repos you have can be served as a subfolder to that website. Those repos, by default, do not inherit the style/theme rules set out in the GitHub.io site, therefore you have to set up your own css or theme for each repo. This readme will have markdown examples for as much syntax as I can find (and specifically that github supports). The markdown in this README is a superset of GitHub Markdown, so some features will not be parsed on GitHub.

Heading Styles

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Alternate Heading Syntax

h1 Heading

h2 Heading

h2 Heading

h3 Heading

h3 Heading

Paragraphs

Paragraph text on three seperate lines.

Line break forced
with double spaces.

Using a slash
for force a line break.

Horizontal Rules

---

---

---

Tables

Month	Savings
January	$250
February	$80
March	$420

Alignment:

Item	In Stock	Price
Python Hat	True	23.99
SQL Hat	True	23.99
Codecademy Tee	False	9.99
Codecademy Hoodie	n/a	142.99

Alignment (possible bug):

Item	In Stock	Price
Python Hat	True	23.99
SQL Hat	True	23.99
Codecademy Tee	False	9.99
Codecademy Hoodie	n/a	142.99

Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

This is in bold, italics, and strikethrough

Blockquotes

basic blockquote following normal paragraph
doublespace rules

Note GitHub Note callout

Warning GitHub Warning callout

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

You can also do a

Multi-paragraph blockquote

Here we're mixing a bunch of markdown in a blockquote:

The quarterly results look great

• Sales were off the chart!
• Morale is strong!
• Poised to go public next spring!

Everything is going according to the plan.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers...

5. ...or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

checkboxen:

• item 1
  • item 2
• item 3
• item checked

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Links

link text

link with hover title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Vertical spacing

test
test




hello

Images

Image with alt text:

Image with alt text and hover title:

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location:

Markdown-it! Plugins

The killer feature of markdown-it is very effective support of syntax plugins.

Emojies

Classic markup: 😉 :crush: 😢 :tear: 😆 😋

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

Subscript / Superscript

• 19^th^
• H2O

<ins>

++Inserted text++

<mark>

==Marked text==

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference².

Definition lists

Term 1

: Definition 1 with lazy continuation.

Term 2 with inline markup

: Definition 2

    { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Custom containers

::: warning here be dragons :::

Credits

Copyright (c) (2023): Scott Kirvan - All rights reserved
Much of the text in this README was copied from Markdown it!, Copyright (c) 2014 Vitaly Puzrin, Alex Kocharin.
ScooterMarkdownStyle is licensed under the MIT License.

Project Link: ScooterMarkdownStyle
CHANGELOG
TODO

Footnotes

1. Footnote can have markup

   and multiple paragraphs. ↩

2. Footnote text. ↩ ↩²