Contents

Exploring Markdown Syntax of LoveIt

Updated on 17-Oct-2021

This post is for exploring markdown syntax, built-in and extended shortcodes of LoveIt theme.

Hugo is really a great tool to start a blog.

With hundreads of Clean, Responsive and Simple Themes, it makes really easy for anyone to create their own website. These themes are really easy to use so that any one can get started in less 5 minutes.

After Examining nearly all the Themes, I selected LoveIt. It is a beautiful and responsive theme with many other features.

This theme have good Documentation, readable dark-mode, and some awesome CSS animations.

The following are most important elements of Markdown. Let’s see how they are represented inside LoveIt Theme.

Headings from h2 through h6 are constructed with a # for each level :

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

Comments should be similar to HTML.

<!--
Just a comment in HTML.
-->

Comment below should NOT be seen :

In Markdown, you can create a horizontal rule using :

  • ---: three consecutive dashes
  • ___: three consecutive underscores
  • ***: three consecutive asterisks

Output :




Emphasizing something makes it different from the things around it.

This Word is bold.

**This Word** is bold.
**This Word** is bold.

This Word is italic.

_This Word_ is italic.
_This Word_ is italic.

This is strikethrough.

~~This~~ is strikethrough.

Bold, italics, and strikethrough can be used in combination :

**_bold and italics_**
~~**strikethrough and bold**~~
~~_strikethrough and italics_~~
~~**_bold, italics and strikethrough_**~~

Output :

bold and italics

strikethrough and bold

strikethrough and italics

bold, italics and strikethrough

Add > before any text you want to quote :

> This is a **Blockquote**.

Output :

This is a Blockquote.

This can also be nested :

> This is a **Blockquote**.
>
> > This is a Nested Blockquote.

Output :

This is a Blockquote.

This is a Nested Blockquote.

One of the following symbol will work :

-   List Item

*   List Item

-   List Item

For example :

-   List
    -   Ordered
    -   Unordered
    -   Tasked
-   Code
    -   Inline
    -   Indented
    -   Block Fenced
    -   Syntax Highlighting

Output :

  • List
    • Ordered
    • Unordered
    • Tasked
  • Code
    • Inline
    • Indented
    • Block Fenced
    • Syntax Highlighting
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Output :

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

:(far fa-bookmark fa-fw): Only using 1. place of every digit will also work!

See the last two.

A list of items with checkboxes :

  • Unchecked Task
    • [ ]
  • Checked Task
    • [x]

For example :

-   [x] Task one
-   [ ] Task two

Output:

  • Task one
  • Task two

Wrap inline snippets of code with `.

In this example, `<section></section>` should be wrapped as **code**.

Output :

In this example, <section></section> should be wrapped as code.

Indenting several lines of code by at least four spaces :

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Output :

// Some comments
line 1 of code
line 2 of code
line 3 of code

Use “fences” ``` to block in multiple lines of code with a language attribute.

```markdown
Sample text here...
```

To activate it, simply add the file extension of the language you want to use directly after the first code “fence”, ```go, and syntax highlighting will automatically be applied in the rendered HTML.

For example :

package main

import (
	"fmt"
	"sync"
)

func main() {
	defer fmt.Println("About to exit!")
	fmt.Println("Started")

	channels := make([]chan int, 5)
	fanInChan := make(chan int)

	go send(channels)
	go recive(fanInChan, channels)

	for val := range fanInChan {
		fmt.Println("Fanin", val)
	}
}
func send(channels []chan int) {
	defer fmt.Println("Send Ended")
	fmt.Println("Send Started")

	for i := 0; i < 100; i++ {
		channels[i%5] <- i
	}

	for i := 0; i < 5; i++ {
		close(channels[i])
	}
}

func recive(fanin chan<- int, channels []chan int) {
	defer fmt.Println("Recive Ended")
	fmt.Println("Recive Started")

	var wg sync.WaitGroup
	wg.Add(5)

	for i := 0; i < 5; i++ {
		go func(inew int) {
			defer wg.Done()
			fmt.Println(inew)
			for v := range channels[inew] {
				fanin <- v
			}
		}(i)
	}

	wg.Wait()
	close(fanin)
}

Tables are created by adding pipes| as dividers between each cell, and by adding a line of dashes- beneath the header. Note that the pipes do not need to be vertically aligned.

For Example :

| Digit | Cardinal Default | Cardinal Left | Cardinal Right |
| :---: | ---------------- | :------------ | -------------: |
|   1   | One              | One           |            One |
|   2   | Two              | Two           |            Two |
|   3   | Three            | Three         |          Three |
|   4   | Four             | Four          |           Four |
|   5   | Five             | Five          |           Five |

Output :

Digit Cardinal Default Cardinal Left Cardinal Right
1 One One One
2 Two Two Two
3 Three Three Three
4 Four Four Four
5 Five Five Five
  • Adding a colon on the right side of the dashes below any heading will right align text for that column.
  • Adding a colon on the left side of the dashes below any heading will left align text for that column.
  • Adding colons on both sides of the dashes below any heading will center align text for that column.
<https://gohugo.io>
<contact@revolunet.com>
[GuHugo](https://gohugo.io)

Output :

https://gohugo.io

contact@revolunet.com

GoHugo

Hover over the link, there is no tooltip.

[DTan13](https://github.com/DTan13/ "Visit Me!")

Output :

DTan13

Hover over the link, there should be a tooltip.

Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters :

## Table of Contents

-   [Chapter 1](#chapter-1)
-   [Chapter 2](#chapter-2)
-   [Chapter 3](#chapter-3)

Will jump to these sections :

## Chapter 1 <a id="chapter-1"></a>

Content for chapter one.

## Chapter 2 <a id="chapter-2"></a>

Content for chapter one.

## Chapter 3 <a id="chapter-3"></a>

Content for chapter one.
The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.

Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.

To create a footnote reference, add a caret and an identifier inside brackets ([^1]). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.

Add the footnote using another caret and number inside brackets with a colon and text ([^1]: My footnote.). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.

This is a digital footnote[^1].
This is a footnote with "label"[^label]

[^1]: This is a digital footnote
[^label]: This is a footnote with "label"

This is a digital footnote1.

This is a footnote with “label”2

Images have a similar syntax to links but include a preceding exclamation point.

![Minion](https://octodex.github.com/images/minion.png)

Minion

or :

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Alt text
The Stormtroopocat

Like links, images also have a footnote style syntax :

![Alt text][id]

Alt text
The Dojocat

With a reference later in the document defining the URL location :

[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"

Example figure input :

{{< figure src="/images/2020/06/01/exploring-markdown-syntax/way.jpg" title="Way (figure)" >}}

Output:-

Way (figure)

Example gist input :

{{< gist spf13 7896402 >}}

Output:-

Example highlight input :

{{< highlight html >}}

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{< /highlight >}}

Output :

<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>

Example instagram input :

{{< instagram BsOGulcndj- hidecaption >}}

Gets a value from the current Page’s params set in front matter.

Example param input :

{{< param description >}}

Output:-

Just Exploring!

Documentation of tweet

Example tweet input :

{{< tweet 877500564405444608 >}}

Output :

Documentation of vimeo

Example vimeo input :

{{< vimeo 146022717 >}}

Output :

Example youtube input :

{{< youtube w7Ft2ymGmfc >}}

Output :


  1. This is a digital footnote ↩︎

  2. This is a footnote with “label” ↩︎

Комментарии