Here is a text paragraph before a heading one. Aute officia nulla deserunt do deserunt cillum velit magna. Officia veniam culpa anim minim dolore labore pariatur voluptate id ad est duis quis velit dolor pariatur enim. Incididunt enim excepteur do veniam consequat culpa do voluptate dolor fugiat ad adipisicing sit.

Heading one

This content is authored using extended Markdown and generated using the Hugo platform. This page is designed so that you can see the impacts of styling changes.

Heading One: This is a heading with a Very Long Title Which Is Useful For Testing wrapping behavior

The above is useful in testing how titles will wrap on the page.

Heading two

Aute officia nulla deserunt do deserunt cillum velit magna. Officia veniam culpa anim minim dolore labore pariatur voluptate id ad est duis quis velit dolor pariatur enim. Incididunt enim excepteur do veniam consequat culpa do voluptate dolor fugiat ad adipisicing sit.

Heading three

Voluptate cupidatat cillum elit quis ipsum eu voluptate fugiat consectetur enim. Quis ut voluptate culpa ex anim aute consectetur dolore proident voluptate exercitation eiusmod. Esse in do anim magna minim culpa sint. Adipisicing ipsumcconsectetur proident ullamco magna sit amet aliqua aute fugiat laborum exercitation duis et.

Heading four

Commodo fugiat aliqua minim quis pariatur mollit id tempor. Non occaecat minim esse enim aliqua adipisicing nostrud duis consequat eu adipisicing qui. Minim aliquip sit excepteur ipsum consequat laborum pariatur excepteur.

Heading five

Veniam enim esse amet veniam deserunt laboris amet enim consequat. Minim nostrud deserunt cillum consectetur commodo eu enim nostrud ullamco occaecat excepteur. Aliquip et ut est commodo enim dolor amet sint excepteur. Amet ad laboris laborum deserunt sint sunt aliqua commodo ex duis deserunt enim est ex labore ut.

Heading six

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraphs

Incididunt ex adipisicing ea ullamco consectetur in voluptate proident fugiat tempor deserunt reprehenderit ullamco id dolore laborum. Do laboris laboris minim incididunt qui consectetur exercitation adipisicing dolore et magna consequat magna anim sunt. Officia fugiat Lorem sunt pariatur incididunt Lorem reprehenderit proident irure. Dolore ipsum aliqua mollit ad officia fugiat sit eu aliquip cupidatat ipsum duis laborum laborum fugiat esse. Voluptate anim ex dolore deserunt ea ex eiusmod irure. Occaecat excepteur aliqua exercitation aliquip dolor esse eu eu.

Officia dolore laborum aute incididunt commodo nisi velit est est elit et dolore elit exercitation. Enim aliquip magna id ipsum aliquip consectetur ad nulla quis. Incididunt pariatur dolor consectetur cillum enim velit cupidatat laborum quis ex.

Officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.

Links

It is important that linked text also look good as you will likely have links in your writing. In particular you will want the links for text with many descenders like 97,345 ways of joyfully piquing intrigue to not look stilted.

Importantly links should also be pleasing to the eye at the start of paragraphs and when they are for text boldly going where many others have gone before. This includes linking to keywording as inline code should be linkable. Now some fake text: officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. This is still true when boldly jogging and also when coding with emphasis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.

Definitions

This is a term

And this is a definition

Another term

First definition

Seconds, longer definition. Incididunt proident ipsum minim duis aliqua ut ex et ad quis. Laborum sint esse cillum anim. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do.

After that first definition we might have more text to explain context or why you should care about something. Then we might have a definition list with code as definitions.

content-box

This is the default box-sizing from the CSS standard wherein the width and height include the content but not the padding, margin, or border.

border-box

The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. The content box cannot be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

After that second set of definitions we might have more text to explain context or why you should care about something. Now we will want another paragraph too.

This paragraph is to make sure the spacing between definitiosn and that between paragraphs feels good. If it does not then the reader will be slightly uneasy but likely unable to articulate why.

Block quotes

Ad nisi laborum aute cupidatat magna deserunt eu id laboris id. Aliquip nulla cupidatat sint ex Lorem mollit laborum dolor amet est ut esse aute. Nostrud ex consequat id incididunt proident ipsum minim duis aliqua ut ex et ad quis. Laborum sint esse cillum anim nulla cillum consectetur aliqua sit. Nisi excepteur cillum labore amet excepteur commodo enim occaecat consequat ipsum proident exercitation duis id in.

Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.

Here we have a doubly nested block quote. You should not use this structure, but since technical writers often do, we put an example here to explore the styling.

Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.

Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure.

Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.

Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.

Labore ea magna Lorem consequat aliquip consectetur cillum duis dolore. Et veniam dolor qui incididunt minim amet laboris sit. Dolore ad esse commodo et dolore amet est velit ut nisi ea. Excepteur ea nulla commodo dolore anim dolore adipisicing eiusmod labore id enim esse quis mollit deserunt est. Minim ea culpa voluptate nostrud commodo proident in duis aliquip minim.

That it will never come again
Is what makes life so sweet.
Believing what we don’t believe
Does not exhilarate.

That if it be, it be at best
An ablative estate —
This instigates an appetite
Precisely opposite.

That it will never come again, Emily Dickenson

Lists

Ordered List

1. Longan
2. Lychee
   1. Ordered sub-item.
   2. Second ordered sub item.
3. Excepteur ad cupidatat do elit laborum amet cillum reprehenderit consequat quis. Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip aliquip velit pariatur dolore.
4. Marionberry
5. Melon
   • Cantaloupe
   • Honeydew
   • Watermelon
6. Miracle fruit
7. Mulberry

Unordered List

• Olive
• Orange
  • Blood orange
  • Clementine
• Papaya
• Ut aute ipsum occaecat nisi culpa Lorem id occaecat cupidatat id id magna laboris ad duis. Fugiat cillum dolore veniam nostrud proident sint consectetur eiusmod irure adipisicing.
  1. First ordered item
  2. Second ordererd item
• Passionfruit

Horizontal rule

A paragraph before the horizontal rule. In dolore velit aliquip labore mollit minim tempor veniam eu veniam ad in sint aliquip mollit mollit. Ex occaecat non deserunt elit laborum sunt tempor sint consequat culpa culpa qui sit. Irure ad commodo eu voluptate mollit cillum cupidatat veniam proident amet minim reprehenderit.

A paragraph afteere the horizontal rule. In laboris eiusmod reprehenderit aliquip sit proident occaecat. Non sit labore anim elit veniam Lorem minim commodo eiusmod irure do minim nisi. Dolor amet cillum excepteur consequat sint non sint.

Tables

Simple table with mutliple styles to test formatting in a table.

Next we show a larger table with symbols in it. Minim id consequat adipisicing cupidatat laborum culpa veniam non consectetur et duis pariatur reprehenderit eu ex consectetur. Sunt nisi qui eiusmod ut cillum laborum Lorem officia aliquip laboris ullamco nostrud laboris non irure laboris. Cillum dolore labore Lorem deserunt mollit voluptate esse incididunt ex dolor.

Code

Inline code

By using backticks we can also have inline code blocks. Testing to see if they can be styled with italic and with bold and bold italic. Also testing strike through and italic strike through and bold strike through and bold italic strike through.

Plain

This is a paragraph before a plain code block so that you can see the layout and spacing. Sometimes you just need a bunch of text. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

It is also helpful to have text afterwards to understand layouts. t incididunt dolor commodo consequat mollit nisi proident non pariatur in et incididunt id. Eu ut et Lorem ea ex magna minim ipsum ipsum do.

Highlighted

The next section uses colorized text and language understanding. This can make it easier for some readers to understand the code as it will appear similar to their editor.

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

Here is a code block with highlighting but not line numbers. You might want to do this to emphasize parts of the code.

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

Finally sometimes we want highlighted code with line numbers. Some people think this makes code samples easier to read. Here is some filler text to bulk up the paragraph. Et fugiat ad nisi amet magna labore do cillum fugiat occaecat cillum Lorem proident. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.

 996
 997
 998
 999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hi there, I love %s!", r.URL.Path[1:])
}

It is also helpful to have text afterwards to understand layouts. Extra pseudo latin filler follows. Incididunt dolor commodo consequat mollit nisi proident non pariatur in et incididunt id. Eu ut et Lorem ea ex magna minim ipsum ipsum do.

Finally, we include some examples of a diff or patch for code highlighting as this seems to be a special case that you might want to format differently.

diff --git a/layouts/404.html b/layouts/404.html
index 33992e6..c309c28 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -4,7 +4,7 @@
     <div class="text-center">
       <h1>{{ i18n "pageNotFound" }}</h1>
       <br/>
-      <img src="{{ .Site.BaseURL }}/img/404.gif" />
+      <img src="/img/404.gif" />
     </div>
   </div>
 {{ end }}

We hope these examples have made it easier for you to style your blog.

Inline elements

In addition to all of the styling below, sometimes it is useful to have footnotes in text. This² is the second sentance of a paragraph with many footnotes. This third sentance in the paragraph has the second footnote, which is the first as written below in the text³. Here we have a spacer sentence to ensure that there are a few vertical lines of text between footnotes so we can test the asthetics. Here is another sentence with footnotes.⁴ This last sentance is here to have even more text between footnotes and to ensure that we can have beautiful styling.

Here we have bold inline text which is quite a handy thing to have. It is also handy to have italic text in paragraphs. Sometimes we want to have text that is both bold and italic and we can do that too. We can also have bold items with italics inside them.

In a similar vein, it can be useful to have text with a Strike through setup to mark things completed or no longer relevant. Sometimes we want italic strike through and other times bold strike through, while extream cases call for bold italic strike through.

What follows is an inline picture which is wider than the natural paragraph width.

Another fundamental item is having links in documents. Links can also be italic or bold or bold italic. We can also apply the strike through style to all the previoius options to get strike through links and italic strike through links and bold strike through links and finally bold italic strike through links.