Terminal CSS

• 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, which can be used as an index for a blog archive.

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.

Terminal CSS also supports a range of special elements.

Blockquote

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

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

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

With only an arrow

With a percentage showing above the arrow

Without arrow

Button Group

Default message

Primary message

Error message

.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;
}

Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.

Version: v0.7.5 Top