Floating image How to exploit the full potential of posts in Markdown on Jekyll and the Jorigamy theme

Jekyll markdown post examples with Jorigamy!

Jekyll markdown post examples with Jorigamy!


How to exploit the full potential of posts in Markdown on Jekyll and the Jorigamy theme

Made By Antonio Trento - Tagged with jekyll update


Thanks to Jekyll you can quickly test your business ideas on the web completely free, thanks to the creation of a landing pages structure and a good marketing strategy.

If your marketing strategy includes blogging, thanks to Jorigamy you will be able to create posts in Markdown, which is a special language that uses special symbols to change the formatting of your text, and the underlying system will convert it to html.

Moreover, thanks to the fact that we are under Jekyll, I will be able to quickly import pieces of HTML code (therefore HTML elements pre-built in other files) through the possibilities offered by the liquid tag.

In addition, Jorigamy has integrated Prism by default to use the highlighted code, which supports many languages.

How to post in markdown

This post wants to be able to quickly introduce you to the understanding and use of the markdown language.

Each file that you can create will have the extension .md or .markdown, a header of your post where you can enter different information related to the post as the title, description, tag, main image and other useful settings.

Here is an example of a header:


---
layout: post-half
title:  "Jorigamy markdown post sample"
tagline: "How to exploit the full potential of posts in Markdown on Jekyll and the Jorigamy theme	"
date:   2018-01-20 20:43:35 +0100
categories: jekyll howto
tags: [ jekyll, update ]
img: 1.jpg
floating: shard-1-5x-3.png
image: assets/images/1.jpg
btn-icon: fa-github
btn-text: fork
btn-link: https://github.com/jorigamy/jorigamy.github.io
---
Thanks to Jekyll you can quickly test your business ideas on the web completely free, thanks to the creation of a landing pages structure and a good marketing strategy.


...

after the introduction of your post there will be the actual text, usually to write in markedown we use a text editor like Visual Studio Code or Atom.

Thanks to the special characters you can quickly emphasize your posts, you can quickly insert elements such as title images, use italics and bold, take advantage of classes and much more.

The markdown elements for your posts

Here are all the markdown elements that you can use in the posts of your blog Jorigamy with Jekyll.

Headers

You can quickly enhance paragraphs by using a title using the # before text:

Heading1

Title2

Title 3

Title 4

Title 5

# Heading1
## Title2
### Title 3
#### Title 4
##### Title 5

hemphasis

Each post needs an emphasis to better clarify the salient features of your article, so you can take advantage of the italics and bold to take stock of the situation.

This text will be italic This will also be italic This text will be bold This will also be bold You can combine them


*This text will be italic* _This will also be italic_
**This text will be bold** __This will also be bold__
*You **can** combine them*

Lists

Lists are a very useful tool for clarifying and describing information in a structured way:

Unordered:

  • Item 1
  • Item 2
  • Item 2a
  • Item 2b

Ordered:

  1. Item 1
  2. Item 2
  3. Item 3
    • Item 3a
    • Item 3b

* Item 1
* Item 2
 * Item 2a 
 * Item 2b

1. Item 1 
2. Item 2 
3. Item 3
 * Item 3a 
 * Item 3b

Images

Each post needs exceptional images to break the text or to better describe the point of the situation. Remember to take advantage of the classes to make your images responisive otherwise on mobile they could ruin the layout.

To specify a css class in a markdown construct you will have to use this word: {:.class}

Lost in space


![GitHub Logo](/images/logo.png){:.img-fluid}

Format: ![Alt Text](url){:.img-fluid}

In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results. Lost in space with description

| In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results. | ![Lost in space with description](https://fullit.github.io/assets/img/big/universe2.jpg "Description of lost in space image"){: .img-fluid } |

Lost in space with description I am text to the right I am text to the right I am text to the right I am text to the right

| ![Lost in space with description](https://fullit.github.io/assets/img/big/universe3.jpg "Description of lost in space image"){: .img-fluid } | I am text to the right I am text to the right I am text to the right I am text to the right |

Video



	

Blockquotes

Backslash escapes

### Code blocks

### Task lists

Tables

### Emoji

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
<!DOCTYPE html>
<html lang="en">
<head>

<script>
	// Just a lil’ script to show off that inline JS gets highlighted
	window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>

<header>
	<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>

	<ul id="features">
		<li>
			<strong>Dead simple</strong>
			Include prism.css and prism.js, use proper HTML5 code tags (<code>code.language-xxxx</code>), done!
		</li>
		<li>
			<strong>Intuitive</strong>
			Language classes are inherited so you can only define the language once for multiple code snippets.
		</li>
		<li>
			<strong>Light as a feather</strong>
			The core is 2KB minified &amp; gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
		</li>
		<li>
			<strong>Blazing fast</strong>
			Supports parallelism with Web Workers, if available.
		</li>
		<li>
			<strong>Extensible</strong>
			Define new languages or extend existing ones.
			Add new features thanks to Prism’s plugin architecture.
		</li>
		<li>
			<strong>Easy styling</strong>
			All styling is done through CSS, with sensible class names like <code>.comment</code>, <code>.string</code>, <code>.property</code> etc
		</li>
	</ul>

</header>



</body>
</html>

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.