I’m thinking that I might need to place the response in a div within my larger post.

For everyone else, I hope that I’m able to write this up and look cool.

I have a couple reviews in Letterboxd. While I was thinking about how I would rank them, I felt it writing it down would help me.

★

I finished this but I regret it.

★★

I’m glad someone was given a chance to make this. Hopefully the next thing is better. Still, I would be hesitant to try anything that boasted about being “The people who brought you X”.

★★★

It’s alright. I liked it enough. I would watch it again if it was on and enough peer pressure was applied.

★★★★

I definitely would watch again. I would recommend it to others. In fact, when I’m feeling overwhelmed with all the possibilities, this might be something I put on instead of something new.

★★★★★

Loved it!

Strangely enough, I don’t write a lot about the things I love on the internet. I feel it might be because it _is_the internet. Years of seeing things being ridiculed makes me hesitant to express a strong feeling about something.

I feel that I’m ready to do that more and more now.

One of the changes that version .117 of Hugo that has been allowed onto Micro.blog is the ability to use diagrams in your markdown. The documentation on diagrams highlights two different kinds of diagrams that you can include; GoAT and Mermaid.

When you make a diagram using GoAT, Hugo translates this into a SVG on the server side and then delivers it with the HTML for that particular post. You can find some really complicated examples of them on the GitHub page for GoAT and I’ve included one below to demonstrate.

Mermaid is a diagramming and charting tool that uses javascript and will load different libraries as needed to create the final product. I believe that it can be used to make static deliverables that you could save, but -according to my understanding- that’s a separate module and outside what Micro.blog and most installations require.

In addition, Hugo does not include the connections to Mermaid, and it’s up to the theme developers to make sure this works.

When you get it working, you can have diagrams like the one below.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

The Mystery of the Mermaid

I had to ask myself why am I putting the time into getting this feature working in my theme. At first glance, the goals of accessibility and speed do not seem to align with adding diagrams built with third party JavaScript framework. I’ve run this site for years and have used tools to create static images that I serve with alt text to illustrate my point.

Ultimately, it’s because I love DIAGRAMS!

I like being able to have a picture that goes with my posts. I don’t feel that I will be using a lot of these, but I want to help those who do.

And with all of my labarum posts, feel free to take what you want to make your themes better.

Splashing around with the Mermaid

I want to start off this section by stating that a lot of what I’m going to write about is duplication of the documentation found online. This is me documenting my process of applying it and my thought process at the time.

My first stop on implementing this is to open up a browser window to duckduckgo and then opening the first 3-5 search results of Hugo mermaid diagram from DuckDuckGo before reading the Hugo Mermaid documentation. I do this to get a feel of what developer roadblocks and experiences that I can note before reading the documentation. It’s similar to where I would read the discussion questions the teacher gives for assigned reading back in school.

The step of creating the layouts/_default/_markup/render-codeblock-mermaid.html is straight forward¹.

<pre class="mermaid">
{{ .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

The first line will go to the resultant HTML, and mermaid will look for items that have the mermaid class to get instructions on what kind of image needs to create.

The second line passes whatever was in the code block. This is typically the definition of the diagram but if you are more familiar or more adventurous you can pass mermaid directives or configurations as well.

The next step is to add something similar to the template.

{{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; 
  mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

I wasn’t sure why this needed to go on the actual page versus on the footer that would be used on every single page of the website. Most of the examples that I looked at had it on the single.html and this worked for individual pages but not for the index.html.

I placed it in article_footer.html until I get a deeper understanding of how Hugo wants to manage a flag that would toggle the loading of JavaScript.

Luckily, the browsers that I tested with only load the JavaScript once. I’m not a JavaScript expert, but I think multiple loads of the 7k line file might be frowned upon.

Colors of the Mermaid

After I got it working for the index and standalone pages, I tested the diagram with the dark mode of the theme. Unfortunately, the default text color does not work in all situations.

I checked the documentation on theming the diagrams and saw that I can change the theme by giving it as a parameter during the initialization of mermaid.

mermaid.initialize( { startOnLoad: true, theme: 'dark' });

This allows for the diagrams to look good in dark mode.

This looked good in dark mode but not light mode.

I then experimented with changing the background for div.mermaid and then having the diagrams render using the default theme for both light and dark mode.

Good but not ultimately it just didn’t look good enough. I showed it to my wife and some people in a discord and they agreed as well.

I needed to find a way to make it toggle from default and dark.

Searching for the Key

Luckily, when I did my first third group of searches, I came across a Hugo forum thread on the “Correct way to embed Mermaid.JS”². And it had a link to this article to add Mermaid to Hugo with Dark Mode which is very informative.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{- if .Page.Store.Get "hasMermaid" }}
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
  let isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  let mermaidTheme = (isDark) ? 'dark' : 'default';
  let mermaidConfig = {
    theme: mermaidTheme,
    startOnLoad: true }
  mermaid.initialize(mermaidConfig);
</script>
{{ end }}

On line 4, we set a property based on the weather the browser is in dark mode.

Line 5 is a ternary statement that chooses between the dark or default themes.

Line 6 is the beginning of a JavaScript Object. I feel that the way it’s in the theme will make it easier to maintain and extend in the future.

It’s all about that base

Mermaid does have a base theme that allows for you to define the colors for the diagram. Yes, I could have taken the time to learn how to pull colors from the theme or use the toggle from light and dark mode to set the diagram colors. But, that could be a long process to customize something that I may not use.

If you want to take this theme and approach, please do, and please have no hesitation to send me a link of your endeavors.

Limitations

Although this implementation does consider if the user is in light or dark mode, it does not switch dynamically. If you are on a system that changes the theme depending on time, you will have to reload to get the different theme. There are themes and walk throughs that show how to do this, but I feel that this iteration and my skill level are not at the appropriate level to implement it now.

Another limitation is that the diagram definition might find it’s way into the .Summary for the individual post.

Mermaid Treasure

Thank you for getting this far into my post. Here are some resources if you want to know more about Mermaid.js.

Accessibility Options

If you took the time to make the diagram, take a little more time to allow other people to get something from it.

Tutorials

Lots of examples on how to make diagrams

Live Editor

A quick way to make and test your diagrams before putting them in your posts.

What’s next for Labarum?

I need to do an accessibility and validation audit of the theme. I’ve been making some adjustments and haven’t been testing to make sure that the site is as accessible as I had originally intended.

"Turn Tables" by Peter Alfred Hess is licensed under CC BY 2.0.

I’m rolling out another update to my theme for Micro.blog. It took a lot of time and effort on my part. It definitely reminds me of the story about how people paint both the front and back of a fence. I don’t think most will know or use some of the things that I put into this. If you do use or learn anything from this, I would really appreciate you sending me a message.

I’ve been doing small tweaks to the theme for the last couple of weeks as I learn more and more about CSS. I had even posted about how I had started working through the material found in Kevin Powell’s Conquering Responsive Layouts course and got a couple of responses that pointed me to further research.

There are plenty of miscelaneous changes that I put in related to accessibility and adding some

Back on the (code) block

I’ve been working on code blocks for a while. I don’t think there are many blogs on micro.blog that feature code as a regular part of what they publish. It’s very important to me that as someone who is writing about the code of the theme that it can be read.

It haunts me.

I was ok with the fact that the code blocks worked well with Hugo version .91 but, with the availability of .177, I couldn’t ignore the problems that I saw.

Here is a picture of what I’m referring to from my post celebrating the announcement.

The underlining issue is that the default properties for the theme and Hugo is to place the styling inline of the HTML. AND, that I’ve opted to use display: inline-block for the <div> that is the container for my blog posts.

To better explain the issue, I’ll use the following snippet found in the Hugo documentation about code fences and put it in one of my posts, I’d get different results based on the version of Hugo that I’m running.

```go {linenos=table,hl_lines=[1,11,"15-16"],linenostart=199, anchorlinenos=true, lineanchors=small }
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}
```

Hugo will render this as a series of nested spans in a table in a couple of divs. For example, the span that contains the line number would be div.highlight > div > table > tr > td:first-of-type > pre > code > span.

Each level of this structure may have its own inline styling.

Going back to the code snippet, with version .91, I would get the following output for the highlighted line 213 (the one that with ‘case “go”’). I changed the spacing for legibility.

<span style="display:block;width:100%;background-color:#3c3d38">
  <span style="margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">
    213
  </span>
</span>

With version .117, you would get the following output for the same line.

<span style="background-color:#3c3d38">
  <span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f" id="big-213">
    <a style="outline:none;text-decoration:none;color:inherit" href="#big-213">
      213
    </a>
  </span>
</span>

Note that this version allows use to set anchors for the individual lines as well as a prefix.

At this point, I realized that I needed to have a better way of controlling the behavior of the different elements. Luckily, the documentation for Hugo Highlighting configuration has a noClasses flag that we can set in the config.json of the theme.

{
    "params": {
        "showTableOfContents": false,
        "showAuthorInfo": false,
        "showDebugInfo": false
    },
    "markup": {
    	"highlight": {
    		"noClasses": false
    	}
    }
}

With the noClasses set to false¹, the line that we’ve been looking at gets rendered to something like below.

The example is legible without the color and inline formatting.

To put the color back into the example, we refer to the documentation on how to generate syntax highlighter CSS to get the colors. I used the example that they provided so that I could compare it to the defaults.

hugo gen chromastyles --style=monokai > syntax.css

Then we add the newly created css file to our site-head.html to represent that syntax color is important but that the style.css is the final say for customization from the theme.

Unfortunately, the lines to do not … um… line up and the colors don’t match up with what we’re expecting.

After some experimenting with Firefox developer tools, I added the following to the style.css to get the lines to match.

.chroma {
    overflow-x: auto;
}

.chroma .lnt {
    display: flex;
}

.chroma .hl {
    display: flex;
}

The color for the highlight appears to be incorrect for all the styles that I tested, so I went back to an earlier version of Hugo to get the color and then placed it in the style.css as well.

.chroma .hl {
    background-color: #3c3d38;
    display: flex;
}

I also created a bug report about Chroma styles for line highlighting are not using the correct color.

As the last step, we remove the box-shadow from the links in the table.

.lnlinks, .lnlinks:hover {
    box-shadow: none;
}

The results of the highlight experiments

So the following is what the code looks like afterward.

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

You can also link directly to lines (for example, line 213) and it should work. It also scrolls side to side to accommodate the longer lines.

Showing the table of contents

When I get frustrated with code blocks, I look at other aspects of the theme and what’s available in Hugo and Micro.blog. Hugo offers built in table of content short code that can be used in the themes. You can read more about it in the online documentation.

My first idea was that I wanted to have a property that users could turn on to automatically add the table of contents to a post. I came across this feature in the Cards Theme for Micro.blog and thought that it would be a nice feature for those who write a long post.

I create _partial\toc.html with the following code that I would put above the <div> that that contains the contents of an individual post.

<aside class="[ TableOfContents ] [ style-box-alt ]">
<h2 class="[ TableOfContentsHeader ] [ text-center ]">Table of Contents</h2>
{{ .Page.TableOfContents }}
</aside>

This would render as an empty box if there were no headers in a post. After a lot of experimenting, I came up with the following.

.TableOfContents {
	display: none;
	margin: 0 auto;
	width: 90%;
}

.TableOfContents:has(ul) {
	display: block;
	float:right;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	padding-right: 1em;
}

Line 2 makes the default state of the table of contents hidden and then line 7 checks to see if Hugo has rendered a <ul> within whatever is in the .TableOfContents class. If it’s true, then line 8 will set the display type to a block; making it visible.

Problem Opportunity

Unfortunately, I ran into a number of issues.

1. It does not take into account older posts that already have table of contents
   Most of my posts about labarum have headers and I do not want to go back and edit all of them. Some users might only want a table of contents that they specify themselves.
2. It obscures posts that start off with a big “hero” image
   I have a couple of posts like this and the floating of the table of contents did not look correct. I will have to come back to this when I’m a little better with CSS.
3. This technique does not currently work with Firefox
   The table of contents does not show up on Firefox. I tried experimenting with different logic to toggle the visibility, but ultimately, I couldn’t get it working. I don’t know how many people are using this theme or how many people come to my site using Firefox, but I really, really want people to be able to read this. NOTE: I wrote this on August 20th, and then the Firefox nightly build enabled the :has flag in build 119. Meaning that this will work soon.

I decided to remove the property and make two different shortcodes for table of contents.

The first one is activated by adding {{ toc }} to your text and will float in the center of the article.

The second one is activated by adding {{ floating-toc }} to your text and will float in the right of the article.

Please note that if you place the short codes at the beginning of the post, it will be part of the .summary.

A Standard Head

A while ago, Sven (@sod), mentioned a couple of people on Micro.blog about abstracting some of the code that is used in all Micro.blog themes. The discussion and pull request was on github and it can now be seen in the micro.blog theme-blank.

You can test it out on your local environment by cloning it and placing it with the other themes.

After you’ve cloned the theme, you edit your config.json to something similar to what is below.

"theme": ["labarum", "theme-blank"]

I then edited the partial\site-head.html to have the following:

{{ "<!-- Microblog header begin-->" | safeHTML }}
{{ partial "microblog_head.html" . }}
{{ "<!-- Microblog header end -->" | safeHTML }}

Here is a direct link to the microblog_head.html partial if you want to read over it.

What’s next?

There were a couple of things that I wanted to add to this release but realized that I was stopping progress. In my last two posts about labarum, I told myself that I wouldn’t wait for perfection to happen.

That being said, here are the things that I have on the roadmap for my next release.

Show the Profile Picture

A couple of the other themes on Micro.blog use the profile picture on the site. I do load this picture in the metadata of the theme’s head and articles but an end user doesn’t see that. Part of this is just me not wanting to show my face and not having it in my initial design for the theme.

Enable Mermaid Diagrams

Hugo natively allows for GoAT diagrams² which are rendereded as SVGs on the site. To enable mermaid, you have to place something in the theme. I’ll be experimenting with and hopefully find a way so that it doesn’t load the associated javascript library if a user doesn’t want to use it.

Reevaluate OpenGraph and other meta tags

There was a pull request and discussion about abstracting the metadata and placing it in “theme-blank”. I currently do this myself and wrote a post about my journey.

I’ll have to read more. I like the idea of having a standard, but I vaguely remember something about why I made the decisions that I did.

CSS responsiveness

Working with my theme makes me appreciate other web developers. Unfortunately, I start comparing my work to others, and comparison is the thief of joy. I’m not happy with a part of the theme that I have. It has to do with how it looks on smaller screens.

Nothing is “wrong” with this, but for some reason, it “does not spark joy”.

I’ll have to take a couple steps back and think about what I want from this.

Break time!

Thank you for getting to the bottom of this article. I certainly hope that you got something out of it.

Please contact me if you have any positive comments or questions!

Just a bunch of examples of code mixed in with the content of a posts. These are all expected to be processed using goldmark.

Code within a paragraph

This an example of code in the middle of a paragraph. I wonder what it will look like in the final example.

Code block without a language tag

This is a simple example block that shows some code that is wrapped with ``` at the top and the bottom.

# [[title]]

<blockquote>
[[selection_html]]

<footer>
<cite>
    <a class="u-in-reply-to" rel="in-reply-to" href="[[url]]">
        [[title]]
    </a>
</cite>
</footer>

</blockquote>

<p class="p-summary">Begin response here</p>

Here is some text that follows the code example.

Code block with a language tag

This is code taken from my theme and wrapped and started with ```go-html-template. This alerts the markdown processor that it needs to highlight the various keywords and variables for that language using pygments.

{{ if .RSSLink -}}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
      <link href="{{ "podcast.xml" | absURL }}" rel="alternate" type="application/rss+xml" title="Podcast" />
      <link rel="alternate" type="application/json" title="{{ .Site.Title }}" href="{{ "feed.json" | absURL }}" />
      <link rel="EditURI" type="application/rsd+xml" href="{{ "rsd.xml" | absURL }}" />
    {{ end -}}

This is another small paragraph following the example and before the next example.

Code block with highlights

In addition, you can highlight rows of code that your article might want to point out specifically.

This exampl is taken from the documentation found here. This particular example used ```go {linenos=table,hl_lines=[8,“15-17”],linenostart=199} to start the code block.

199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

This is some code following the code block.

During my Micro Camp presentation, I stated that the first publication is the first iteration…

Then I stopped.

Just a lot of little things got in the way, and I started to sit on changes that I have made. I’m hoping that this post will be me getting back into publishing changes and why I am making them.

Here’s a list.

• Floating Images
• Handling Transcripts
• No Longer Published
• Center Navigation Menu
• Changing the descriptions
• Removing Comments off the main page
• What’s next?

Floating Images

Right before Micro Camp, I used MarsEdit to write a post and I used one of the built in alignments to float the image to the left. I was hoping that it would look the way I remember old newspaper articles being.

Although it did have the text wrapped properly, the image “escaped” out of the article and onto the following article.

This was at the same time that there was a discussion about floating images in the help. With this information, I created a little demo post to help me evaluate the preconfigured defaults in MarsEdit.

The way, I got to it was dragging an image onto a post to get to the Upload Utility, but you can also access it from the Window menu.

From there, you can select the options in “Format” or click customize.

Afterwards, you can add more styling to the markup of the image so that future post can use what you’ve been working on.

This works for smaller images, but fell apart when I used a long image with small text. I went on a very long online journey look at grid and flex box until I ultimately, came to the following code that expanded the <div> that I use for the content of the post.

.post-body {
    display: inline-block;
}

Three lines and it only took me hours.

Handling Transcripts

I had some code that would check if the post has a transcript for a podcast associated with it. That’s been removed as micro.blog automatically adds this for you. Thank you, @manton.

No Longer Published

When I first started working with the theme, I thought I would show the modified date and published date so that my users could quickly tell when something had been updated.

Looking at other themes, I don’t see many that have this information and it’s assumed that any date on the post is when it was published. I’m still keeping mine on the bottom for now. Although, I sometimes thinking about how a post might be more comparable to a journal entry or letter to the world.

Center Navigation Menu

Most of the other items on the page are centered. For example, the articles and footer. I centered this and gave it some margin.

Describe me

I’ve been using .Site.Params.description incorrectly. I’ll be using .Site.Params.itunes_description for the description used in the main page meta data.

No Comment

I moved comments from the posts off of the main page and out of the article block that they would normally be in. This meant moving the following code from the partials/article-footer.html to _default/single.html.

{{ if .Site.Params.include_conversation }}
<script type="text/javascript" 
src="https://micro.blog/conversation.js?url={{ .Permalink }}">
</script>
{{ end }}

What’s next?

I’m thinking about changes in two different areas.

Styles

The next step is to reevaluate the styles that I’m using for the site. I’ve been adding things as I’ve come across different use cases and I want to make sure that the css file while stands at 496 lines currently is easy to read and understand for Future Mandaris 3 months from now. My friend, Michael, told me about Cube CSS so I’ll be looking into using that as a way to organize it.

I’m not happy with the way that comments look. I’ve decided that I’ll only change the style after I’ve implemented Cube CSS otherwise I’ll only have spaghetti code for the rest of this project.

I’d also like to change the margin between images on the site. For example, this post that I made with the sunlit app. That might be a simple fix that I’d slip into a point release.

After that, I’m planning on making the <code> and code blocks look more seamless in posts and change the font such that they stick out more when reading in a paragraph.

Features

On my site, I don’t use any of the plugins. They should work, but I’d like to make sure that the most popular (AKA the ones that people I follow have mentioned) are working properly.

I don’t see there being a problem because of the nature of the theme, but if you know of an issue, please let me know.

Table of Contents

• The First thing
• The Second thing
• The Third thing
• Figures
• Tasklists
• Tables

The first thing

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted¹ his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready² to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me? " he thought. It wasn’t a dream.

His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there³ hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.

I ought to just try that with my boss; I’d get kicked out on the spot. But who knows, maybe that would be the best thing for me. If I didn’t have my parents to think about I’d have given in my notice a long time ago, I’d have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He’d fall right off his desk!⁴ And it’s a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there’s still some hope; once I’ve got the money together to pay off my parents’ debt to him - another five or six years I suppose - that’s definitely what I’ll do. That’s when I’ll make the big change. First of all though, I’ve got to get up, my train leaves at five. " And he looked over at the alarm clock, ticking on the chest of drawers. “God in Heaven! " he thought. It was half past six and the hands were quietly moving forwards, it was even later than half past, more like quarter to seven. Had the alarm clock not rung? He could see from the bed that it had been set for four o’clock as it should have been; it certainly must have rung. Yes, but was it possible to quietly sleep through that furniture-rattling noise?

The Second Thing

Pack my box with five dozen liquor jugs. Several fabulous dixieland jazz groups played with quick tempo. Back in my quaint garden, jaunty zinnias vie with flaunting phlox⁵. Five or six big jet planes zoomed quickly by the new tower. Exploring the zoo, we saw every kangaroo jump and quite a few carried babies. I quickly explained that many big jobs involve few hazards. Jay Wolf is quite an expert on the bass violin, guitar, dulcimer, ukulele and zither. Expect skilled signwriters to use many jazzy, quaint old alphabets effectively. The wizard quickly jinxed the gnomes before they vaporized. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG’S BACK 1234567890⁶.

The Third Thing

Lorem ipsum dolor sit amet, eu detracto senserit vis, ei natum ridens detracto sit. Id iriure prompta vix. Sit ea feugiat invenire similique, etiam solet eleifend cu per. Ea falli nullam elaboraret vis, modo percipitur omittantur at ius, in quo nullam timeam ocurreret. Est ad deleniti corrumpit scripserit, te usu apeirian recusabo oportere, nemore laboramus vulputate te vim. Ea eum mazim iudicabit, harum utroque pri ne.

Per no putant iriure intellegebat. Tamquam maiorum ei eum, ea iuvaret maluisset liberavisse eam, adhuc falli tamquam ius te? Eu amet virtute scaevola est, simul nusquam invidunt duo id, at usu sanctus abhorreant definiebas! Vide ullum quo cu? Ius in forensibus sadipscing, dicant aperiri volutpat et sit.

Veri dicat pro te, an aliquam reprimique cum, et pro commune maiestatis. Nec ex amet eleifend definitiones! An adipisci consequuntur est. In quot oratio vis. Vide nobis aperiam pri ad, et sit dictas adolescens inciderint, pertinacia referrentur consequuntur pri id?

Some more examples

bold and italics

strikethrough and bold

strikethrough and italics

bold, italics and strikethrough

I am going to use the example from the footnote documentation⁷.

Remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.

• Harriet Tubman

Figures and Images

Using Short codes

Here’s another.

Raw HTML

Lillie on the Couch

Images with titles example

Tasklists

• an unchecked task list item
• checked item

A little bit more

• Write the press release
• Update the website
• Contact the media
• foo
  • bar
  • baz
• bim

Tables

A couple examples of a markdown table.

This is a bigger table

The following is from multimarkdown.

I hope the following work as well. It was found on a page showing github markdown.

This is a table with more content. These were taken from https://markdown-it.github.io/ and https://michelf.ca/projects/php-markdown/extra/#table.

Right aligned columns

Centered values

Something else

Hello

Goal for this document

I wanted to make a page that contained most if not all of the different things that you would find in a blog post written in Markdown. For simplicity, I’ll stick to what is found in Python-Markdown as it is the one that I use most.

Basic Syntax

This sentence as emphasied and bold text.

This sentence has emphasis and bold text combined.

This sentence has code written in it.

This sentence has strikethrough written in it.

This is a sentence with a link.

Multiple Paragraphs of text

Pack my box with five dozen liquor jugs. Several fabulous dixieland jazz groups played with quick tempo. Back in my quaint garden, jaunty zinnias vie with flaunting phlox¹. Five or six big jet planes zoomed quickly by the new tower. Exploring the zoo, we saw every kangaroo jump and quite a few carried babies. I quickly explained that many big jobs involve few hazards. Jay Wolf is quite an expert on the bass violin, guitar, dulcimer, ukulele and zither. Expect skilled signwriters to use many jazzy, quaint old alphabets effectively. The wizard quickly jinxed the gnomes before they vaporized. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG’S BACK 1234567890².

Lorem ipsum dolor sit amet, eu detracto senserit vis, ei natum ridens detracto sit. Id iriure prompta vix. Sit ea feugiat invenire similique, etiam solet eleifend cu per. Ea falli nullam elaboraret vis, modo percipitur omittantur at ius, in quo nullam timeam ocurreret. Est ad deleniti corrumpit scripserit, te usu apeirian recusabo oportere, nemore laboramus vulputate te vim. Ea eum mazim iudicabit, harum utroque pri ne.

Per no putant iriure intellegebat. Tamquam maiorum ei eum, ea iuvaret maluisset liberavisse eam, adhuc falli tamquam ius te? Eu amet virtute scaevola est, simul nusquam invidunt duo id, at usu sanctus abhorreant definiebas! Vide ullum quo cu? Ius in forensibus sadipscing, dicant aperiri volutpat et sit.

Veri dicat pro te, an aliquam reprimique cum, et pro commune maiestatis. Nec ex amet eleifend definitiones! An adipisci consequuntur est. In quot oratio vis. Vide nobis aperiam pri ad, et sit dictas adolescens inciderint, pertinacia referrentur consequuntur pri id?

Images

Large image

Images in a paragraph

Yar Pirate Ipsum. Rutters log red ensign bring a spring upon her cable Pirate Round prow fathom. Snow broadside Arr poop deck hardtack lad barkadeer. Cat o’nine tails handsomely fire ship reef bring a spring upon her cable yardarm jury mast. Hang the jib mutiny execution dock cutlass Sail ho furl ye. Barque crimp aye fore nipper yo-ho-ho grog. Crack Jennys tea cup Brethren of the Coast weigh anchor spanker port rutters jack.

Man-of-war tender lanyard piracy yard prow case shot. Bilge brig six pounders loot landlubber or just lubber me salmagundi. Chantey keelhaul Pieces of Eight hail-shot mutiny brigantine barque. Dead men tell no tales American Main parrel code of conduct haul wind hornswaggle Admiral of the Black. Cable no prey, no pay bilge rat swab wherry boom run a shot across the bow. Run a shot across the bow skysail strike colors Sail ho lateen sail wench Barbary Coast.

List

There are two kinds of lists with

Ordered lists

1. First item

2. Second item

   Second paragraph of Second item

3. Third item

A small paragraph before the second list.

4. Forth item - If this doesn’t start with 4 than smart list are not on.

   • Nested unordered list item 1

   • Nested unordered list item 2

   • Nested unordered list item 3

5. Fifth item

6. Six item

Unordered lists

• First item.

• Second item. This second item has two paragraphs in it.

  This is the second paragraph of the second item. (Not confusing at all.)

  Block quote in the unordered list

  Followed by a code block:

  {
    "firstName": "John",
    "lastName": "Smith",
    "age": 25
  }
  

• Third item.

  1. Nested ordered list item 1

  2. Nested ordered list item 2

  3. Nested ordered list item 3

• Forth item.

Footnotes

I am going to use the example from the footnote documentation³.

Block quote

Something simple should go here.

Remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.

• Harriet Tubman

Sometimes you might have nested block quotes.

You miss 100% of the shots you don’t take.

• Wayne Gretzky

• Michael Scott

Tables

This is my tables section. These were taken from https://markdown-it.github.io/ and https://michelf.ca/projects/php-markdown/extra/#table.

Right aligned columns

Centered values

Misc

These are the things that most people don’t really use.

Definitions

Definitions are a great way to show information.

Apple

Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

An American computer company.

Banana

A tropical plant of the genus Musa.

Orange

The fruit of an evergreen tree of the genus Citrus.

Pinapple

A tropical fruit from the Bromeliaceae family.

Mango

A juicy stone fruit (drupe) from numerous species of tropical trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible fruit.

Complex definitions

Term 1

This is a definition with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Second definition for term 1, also wrapped in a paragraph because of the blank line preceding it.

Term 2

This definition has a code block, a blockquote and a list.

code block.

block quote on two lines.

1. first list item
2. second list item

Code blocks

import logging
# This line is emphasized
# This line isn't
# This line is emphasized

def func():
    # function body
    someValue = "func called"
    logging.info(someValue)

if __name__ == '__main__':
    func()

Abbreviations

The HTML specification is maintained by the W3C. This example taken from https://python-markdown.github.io/extensions/abbreviations/

*[HTML]: Hyper Text Markup Language

*[W3C]: World Wide Web Consortium

Task Lists

This is fairly new to markdown.

• Write the press release
• Update the website
• Contact the media
• foo
  • bar
  • baz
• bim