Image

Image with Caption

Built in theme for Highlight.js

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--block-background-color);
  color: var(--font-color);
}

.hljs-comment,
.hljs-quote {
  color: var(--secondary-color);
}

.hljs-variable {
    color: var(--font-color);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: var(--primary-color);
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color: var(--secondary-color);
}

.hljs-string {
    color: var(--secondary-color);
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
  color: var(--primary-color);
}

.hljs-doctag {
  color: var(--secondary-color);
}

.hljs-attr {
  color: var(--primary-color);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--primary-color);
}


.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

• This is a list item
• So is this - there could be more
• Make sure to style list items to:
  • Not forgetting child list items
  • Not forgetting child list items
  • Not forgetting child list items
  • Not forgetting child list items
• A couple more
• Top-level list items

Don't forget Ordered lists:

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus
   1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   2. Aliquam tincidunt mauris eu risus.
3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
4. Aliquam tincidunt mauris eu risus.

Description lists are also included.

Description list title 01

Description list description 01

Description list title 02

Description list description 02

Description list description 03

A Table of content

Unlike regular lists, the TOC component only supports a single depth level.

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
3. Aliquam tincidunt mauris eu risus.
4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
5. Aliquam tincidunt mauris eu risus.

With only an arrow

With a percentage showing above the arrow

Without arrow

Blockquote

This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

Loading Element

Loading

Tooltip

Misc

Terminal Prompt

I am the a tag example
I am the abbr tag example
I am the b tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strong tag example
I am _{the sub tag} example
I am ^{the sup tag} example
I am the var tag example

Address