Markdown Style

Preview of rendered html elements

Inspired by iA Writer, a quintessential writing machine, the markdown style is rendered by html-md.css. Purely implemented in CSS, it is optimized for all screen sizes. To see the responsive effect, please try changing the viewpoint width or height.

Paragraph

ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversations?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Blockquote

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.

List

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Number List

  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. List item
  7. List item
  8. List item
  9. List item
  10. List item
  11. List item

Code Block

I am a code block.

  へ　へ
  の　の
  　も　
  　へ　

Horizontal rules

Link

夏樹の時間

Emphasis

single asterisks

single underscores

double asterisks

double underscores

double tilde

Inline code

Use the printf() function.

There is a literal backtick (`) here.

Image

Markdown Style

Highlighter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <title>html-md.css</title>
  <link rel="stylesheet" href="https://unpkg.com/html-md.css/dist/html-md.css" crossorigin="anonymous">
</head>
<body>
  <div class="html-md"></div>
</body>
</html>