More Markdown

Saturday, Feb 13, 2021
Tags: markdown

With this post I will be continuing my Markdown journey.

Contents

Images

To display an image on a page a similar format to a link is used.

![alt text](url)

For example

![King small](/img/king-small.jpg)

produces

King small

To provide an anchor link on a page 2 parts are required, the anchor and the link to the anchor.

For this post the h2 headers have id attributes so

## Images

when the web page is generated by HUGO becomes

<h2 id="images">Images</h2>

The syntax for an anchor link is

[text to display](./target.md#heading-id) 

For example to go to the Images section

The anchor is as follows

[This is a link to the Images section of this post](#images)

produces

This is a link to the Images section of this post

Check lists

Check lists can be created using [] and [x]

For example

[x] Task 1
[ ] Task 2
[ ] Task 3
[ ] Task 4

produces

[x] Task 1
[ ] Task 2
[ ] Task 3
[ ] Task 4

Horizontal rules

To add a horizontal rule use the -

for example

above

---

below

produces

above


below

Block quotes

To create a section that quotes from another source, the > is used for a block blockquote.

For example

> Single line quote  
>> Nested quote  
>> multiple line  
>> quote  

produces

Single line quote

Nested quote
multiple line
quote

Code Blocks

A block of code can be added to a page by using the Tab or entering 4 spaces

For example

	<html>
		<head>
			<title>Hello world</title>
		</head>
		<body>
			Hello world
		</body>
	</html>

produces

<html>
    <head>
        <title>Hello world</title>
    </head>
    <body>
        Hello world
    </body>
</html>

Syntax highlighting

Code blocks can also support syntax highlighting

From the previous HTML example by adding html after the first set of ``` the following is produced

	<html>
		<head>
			<title>Hello world</title>
		</head>
		<body>
			Hello world
		</body>
	</html>

By adding json after the first set of ```

```json
{
    "firstName": "Jane",
    "lastName": "Doe",
    "age": 32
}

```

produces

{
  "firstName": "Jane",
  "lastName": "Doe",
  "age": 32
}

csharp produces the following

		string a = "abc";
		string b = "abc";
		if (a == b) {
			//something goes here
			string name = "fred";
		}

and javascript produces

		string a = "abc";
		string b = "abc";
		if (a == b) {
			//something goes here
			string name = "fred";
		}

and sql produces

		SELECT firstName
		       , lastName
        FROM   Student
		WHERE  grade = 'A'

and css produces

		h1 {
			color: black;
			margin-left: 30px;
		}

and using cmd for the command line produces

		md new-folder
		cd new-folder
		dir

Nested Lists

Ordered and unordered lists can be nested

An example of an unordered lists

- Item 1
	- Item 1.1
- Item 2
	- Item 2.1
	- Item 2.2
-Item 3

produces

  • Item 1
    • Item 1.1
  • Item 2
    • Item 2.1
    • Item 2.2 -Item 3

An ordered list would be set up as follows

1. Item 1
	1. Item 1.1
1. Item 2
	1. Item 2.1
	1. Item 2.2
1.Item 3

producing

  1. Item 1
    1. Item 1.1
  2. Item 2
    1. Item 2.1
    2. Item 2.2
  3. Item 3

Escaping characters

When writing content in a markdown file there will be times when a character is needed that has a formatting use in the markdown generation. To overcome this the backslash can be used in front of the character.

For example

\*\*some text\*\*

produces

**some text**

instead of

some text

This table provides examples of characters that utilize the escape character

Escape Result
\# # asterisk
\* * hash mark
\~ ~
\- - minus
\\ \ backslash
\+ + plus
\` ` backtick
\{\} {} curly braces
\[\] [] square braces
\(\) () parentheses


More on HTML

As of the date of this post, this site is being generated by HUGO. By default HUGO uses the Goldmark Markdown processor and HTML is disabled by default.

Should HTML be required then modify the config.toml file for HUGO as follows

[markup]
taskLists = false

By the way for this code block toml was used.

Note other Markdown processors and site generators could handle this differently.

So there you have it. More capabilities of Markdown. It is worth remembering that Markdown is indented for content generation. Not everytrhing that can be done with HTML can be accomplished however with attention, care and planning Markdown is an easy way to produce content.

(C)2014-Today  Coding With An Accent