---
title: Preview Color Themes | doc-utils
layout: preview-color-themes.html
breadcrumb:
- '[doc-utils](../)'
- '[color-themes](./)'
---

# Sample Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ultricies odio. Praesent vitae urna placerat, pellentesque nibh auctor, gravida orci. Mauris nisi dui, pharetra id nisi quis, placerat vehicula nisl. Sed non enim sit amet diam venenatis suscipit. Proin sit amet fringilla dui, nec volutpat tellus. Suspendisse id sodales turpis, suscipit congue felis. Ut sed sodales lorem. Pellentesque vel felis et ipsum gravida tempus ut eget tellus. Ut elementum elementum tristique. Etiam accumsan ultrices mauris, mollis pellentesque ante efficitur in. Quisque non neque porttitor, tincidunt arcu porttitor, tincidunt turpis. Nullam eu ultrices ex, vitae hendrerit ipsum.

```ts "_fig. 1: How to say hello in TypeScript_"
// hello.ts
let people_seen = 0;

export function say_hello(say_to: string) {
  console.log(`Hello, ${say_to}!`);
  people_seen++;
}


// main.ts
import { say_hello } from './hello';

say_hello('Alice');
say_hello('Bob');
say_hello('Charlie');
say_hello('Dave');

console.log(`We said hello to ${people_seen} people`);
```

Ut cursus erat id iaculis molestie. Praesent rhoncus rhoncus vehicula. Suspendisse non cursus ante. Donec finibus nec nulla vitae ultrices. Duis vel erat in orci feugiat varius vel tempor sem. Duis ornare eget urna vel ultrices. Ut [gravida scelerisque](#) ante. Etiam ultrices ex sit amet est convallis interdum. Sed augue est, consectetur ut scelerisque nec, fringilla eget sem. Mauris suscipit vestibulum tortor et rhoncus. Aliquam pretium enim a lacus efficitur, sed ornare tellus auctor. Nunc a tristique ligula.

## An Interesting Sub-Section

Etiam tempus id purus accumsan congue. Mauris et egestas nunc. Sed eu enim nunc. Etiam maximus dui molestie, sagittis neque non, tincidunt ligula. Fusce fermentum metus massa, nec convallis urna viverra sit amet. Ut libero ex, venenatis ut semper sed, fermentum sed massa. Ut gravida ligula diam, non vehicula orci porttitor quis. Vivamus porta, risus nec egestas imperdiet, sem tellus congue mi, eget molestie tellus mauris et arcu. Suspendisse sit amet rhoncus lectus. In [lorem lorem](#), varius id est sed, maximus eleifend augue. Ut scelerisque nunc et commodo varius. Nam quis turpis ac metus suscipit dictum. Duis ut elit vel neque pretium mattis. Curabitur vehicula a dolor ac condimentum. Aenean sit amet ultricies nibh. Nunc id massa ac augue ultricies consequat.

```pikchr "_fig. 2: Input/Output diagram for markdown2html and docs2website_"
MD:     box wid 1.2 ht 0.5 "Markdown" fill yellow color yellow
HTML:   box same at 2.5 east of MD "HTML Fragments" fill blue color blue
COLOR:  box same at 0.75 north of HTML "Color Themes" fill blue color blue
ASSET:  box same at 0.75 south of HTML "Static Assets" fill blue color blue
WEB:    box same at 2 east of HTML "Static Website" fill green color green

arrow from MD .e to HTML .w \
  "markdown2html" italic aligned above small color blue

arrow from COLOR .e to WEB .nw color green
arrow from HTML .e to WEB .w color green
arrow from ASSET .e to WEB .sw color green
```

In et ipsum laoreet, lobortis turpis eget, hendrerit elit. Ut vehicula magna nec elementum consectetur. Nam luctus tellus sit amet odio maximus ultrices. Donec vulputate magna nisi. Morbi euismod velit et dolor posuere, a [aliquet quam sodales](#). Pellentesque luctus eleifend ex sed vestibulum. Fusce sed rutrum ante. Pellentesque id justo lobortis, sollicitudin velit ut, porttitor magna. Mauris eu lorem congue, pellentesque purus et, eleifend velit. Nulla facilisi.

### An Even More Interesting Sub-Sub-Section

Suspendisse sapien libero, facilisis sit amet ex sed, hendrerit rhoncus turpis. Fusce blandit arcu et justo molestie, ac porttitor metus vestibulum. Proin posuere dui eu euismod molestie. In sed purus nec nibh auctor efficitur. Vestibulum vehicula, augue elementum lobortis egestas, justo erat dictum urna, quis placerat dolor eros nec ex. Sed vulputate eros eget dolor tincidunt aliquam. Vestibulum rhoncus odio magna, non mollis ipsum tristique ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pretium lorem justo, vel cursus quam gravida eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper justo eu leo aliquam, id dictum mauris sollicitudin. Ut in tincidunt velit. Nam id auctor justo. 

```katex "_fig. 3: Math! D:_"
{(ax + by + x)^2 \over {a^2 + b^2}} = (x - f_1)^2 + (y - f_2)^2
```



## Donec quis laoreet nisl, vel

Aliquam lacinia elementum velit in maximus. Maecenas et mi dapibus, vehicula augue sit amet, dapibus sapien. Aliquam sit amet rhoncus risus. Vestibulum pulvinar odio at maximus commodo. Quisque nec lectus non dui elementum sollicitudin. Integer purus risus, facilisis vitae magna sed, pellentesque suscipit libero. Duis commodo eu est eu cursus. Vivamus feugiat neque erat, nec mollis purus vulputate non. Integer consectetur purus urna, et molestie magna sollicitudin eget.

Etiam scelerisque vitae lacus eu cursus. Mauris dictum, arcu vitae fermentum congue, turpis tellus tempus erat, eu egestas elit justo vitae velit. Nam mattis, magna vitae laoreet tincidunt, enim nibh scelerisque justo, ac fringilla mauris ipsum eget odio. Cras porta lacus et ipsum auctor venenatis. Maecenas nisi ante, interdum vehicula metus efficitur, vulputate semper elit. Aliquam ut convallis tortor. Phasellus eu dui vitae mi sagittis iaculis a sit amet massa.

### Nulla mollis diam vel lectus

Mauris vel erat id dui hendrerit pellentesque. Cras ac elit vehicula, volutpat magna sit amet, commodo purus. Fusce iaculis erat nec placerat laoreet. Ut pulvinar ac urna vitae porttitor. In iaculis quam nec nisi fermentum placerat. Etiam eu faucibus mauris. Mauris vulputate rutrum orci ac semper. Nam cursus tempor lorem, et accumsan ex semper elementum. Nulla fermentum eros odio, nec gravida tellus rutrum eget. Sed molestie dui ac convallis faucibus. Vestibulum commodo tortor non tincidunt tempus. Morbi ut tincidunt sem. Nunc tortor nibh, scelerisque nec lacus eget, tempor porttitor lacus. Nunc eros lorem, pharetra sed purus et, pharetra egestas ante.

Aliquam erat volutpat. Aliquam erat volutpat. Nam blandit, est at viverra maximus, sem leo gravida ipsum, eget congue eros eros eu sapien. Nunc euismod nec lorem vel scelerisque. Curabitur eu porttitor velit, ac viverra ipsum. Integer id erat dignissim, ultrices mauris in, consequat quam. Nullam leo enim, ullamcorper ac est vitae, malesuada commodo purus. Suspendisse facilisis posuere cursus. Nam pharetra ultrices magna et molestie. 
