Helium Jekyll

Helium Jekyll Theme Markdown Examples

2017-10-08T00:00:00+00:00

Markdown samples usefull when you start write your blog 🎉 🎆.

Examples

in markdown cannot guarantee it work well

Test paragraph with bg-danger custom class.

Test paragraph with bg-success custom class.

Test paragraph with bg-info custom class.

Test paragraph with bg-warning custom class.

in markdown

{:.bg-danger}
Test paragraph with **bg-danger** custom class.

{:.bg-success}
Test paragraph with **bg-success** custom class.

{:.bg-info}
Test paragraph with **bg-info** custom class.

{:.bg-warning}
Test paragraph with **bg-warning** custom class.

Test Bold

Test coursive

A divider: ----

This is **not** in bold.

This
is
a list

This is quoted

with
numbers

This is a link

Default. Text paragraph basic color

.text-primary: Text paragraph using Primary color

.text-success: Text paragraph using Success color

.text-info: Text paragraph using Info Color

.text-warning: Text paragraph using Warning color

.text-danger: Text paragraph using Danger color

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Subtitle h class using `{:.sub-title}`

Video

Not in markdown

in HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/Po16lsLfpMk" 
frameborder="0" allowfullscreen></iframe>

Paragraphs

A large paragraph using {:.lead}: But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system Regular Paragraph: But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system

Small Paragraph using {:.text-sm}: But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system

Extra Small Paragraph using {:.text-xs}: But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system

Alerts

in markdown cannot guarantee it work well

If are you looking to html version explore Labels Alerts and Components

Test Message alert success Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

Test Message alert info Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

Test Message alert danger Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

Test Message alert warning Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

in markdown

{:.massage-box .alert-success}
**Test Message alert success** 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

{:.massage-box .alert-info}
**Test Message alert info** 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

{:.massage-box .alert-danger}
**Test Message alert danger** 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

{:.massage-box .alert-warning}
**Test Message alert warning** 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt a in, ullam.

Labels

in markdown cannot guarantee it work well

Default

Success

Info

Warning

Danger

in markdown

{:.label .label-default-filled}
Default

{:.label .label-success-filled}
Success

{:.label .label-info-filled}
Info

{:.label .label-warning-filled}
Warning

{:.label .label-danger-filled} 
Danger

Class nesting samples

*   list item

*   list item {.classA}
    {.classB}
{.classC}

{.some-class .proposed-syntax} A paragraph of text.

<p class="some-class" markdown="1">
  A paragraph of text.
</p>

Tables

When you compare the code for tables, the ability to add a class via markdown attributes makes a world of difference:

Some	Basic	Table
a	b	c
d	e	f

in markdown

{.table .table-striped}
Some | Basic | Table 
-----|-------|------
a    | b     | c
d    | e     | f

Dynamic ADS Block

It autoresize in base of the container dimensions, avaible if you edit _confi.yaml file

in HTML and liquid

<div>

{% include ads-block.html %}

<div>

Copy Sample

A Study In Scarlet

PART I.

(Being a reprint from the reminiscences of John H. Watson, M.D., late of the Army Medical Department.)

Mr. Sherlock Holmes

In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second […]

The campaign brought honours and promotion to many, but for me it had nothing but misfortune and disaster. I was removed from my brigade and attached to the Berkshires, with whom I served at the fatal battle of Maiwand. There I was struck on the […] {.randomClass}
More content

Worn with pain, and weak from the prolonged hardships which I had undergone, I was removed, with a great train of wounded sufferers, to the base hospital at Peshawar. Here I rallied, and had already improved so far as to be able to walk about the […] p.s. I tend to agree on the adding classes/IDs to every possible element to be overkill.

in markdown

# A Study In Scarlet

## PART I.

(Being a reprint from the reminiscences of John H. Watson, M.D., late of the Army 
Medical Department.)

1.  ### Mr. Sherlock Holmes

    In the year 1878 I took my degree of Doctor of Medicine of the 
    University of London, and proceeded to Netley to go through 
    the course prescribed for surgeons in the army. Having completed 
    my studies there, I was duly attached to the Fifth Northumberland 
    Fusiliers as Assistant Surgeon. The regiment was stationed in 
    India at the time, and before I could join it, the second [...]

    The campaign brought honours and promotion to many, but for me 
    it had nothing but misfortune and disaster. I was removed from my 
    brigade and attached to the Berkshires, with whom I served at 
    the fatal battle of Maiwand. There I was struck on the [...]            {.randomClass}

2.  ### More content

    Worn with pain, and weak from the prolonged hardships which 
    I had undergone, I was removed, with a great train of wounded 
    sufferers, to the base hospital at Peshawar. Here I rallied, and had 
    already improved so far as to be able to walk about the [...]
p.s. I tend to agree on the adding classes/IDs to every possible element to be overkill.

Other features

Lists (Uneder construction)

Red one
Green two
Blue three

A list item.

With multiple paragraphs.
Another item in the list.

LINKS

Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link.

Inline-style links use parentheses immediately after the link text. For example:

This is an [example link](http://example.com/).
Output:

<p>This is an <a href="http://example.com/">
example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

This is an [example link](http://example.com/ "With a Title").

Output:

<p>This is an <a href="http://example.com/" title="With a Title">
example link</a>.</p>

Reference-style links allow you to refer to your links by names, which you define elsewhere in your document:

I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"

Output:

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters, numbers and spaces, but are not case sensitive:

I start my morning with a cup of coffee and
[The New York Times][NY Times].

[ny times]: http://www.nytimes.com

Output:

<p>I start my morning with a cup of coffee and
<a href="http://www.nytimes.com/">The New York Times</a>.</p>

IMAGES

Image syntax is very much like link syntax.

Inline (titles are optional):

![alt text](/path/to/img.jpg "Title")

Reference-style:

![alt text][id]

[id]: /path/to/img.jpg "Title"

Both of the above examples produce the same output:

<img src="/path/to/img.jpg" alt="alt text" title="Title" />

CODE

In a regular paragraph, you can create code span by wrapping text in backtick quotes. Any ampersands (&) and angle brackets (< or >) will automatically be translated into HTML entities. This makes it easy to use Markdown to write about HTML example code:

I strongly recommend against using any `<blink>` tags.


I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`.

Output:

<p>I strongly recommend against using any
<code>&lt;blink&gt;</code> tags.</p>

<p>I wish SmartyPants used named entities like
<code>&amp;mdash;</code> instead of decimal-encoded
entites like <code>&amp;#8212;</code>.</p>
To specify an entire block of pre-formatted code, indent every line of the block by 4 spaces or 1 tab. Just like with code spans, &, <, and > characters will be escaped automatically.

Markdown:

If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:

    <blockquote>
        <p>For example.</p>
    </blockquote>

Output:

<p>If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:</p>

<pre><code>&lt;blockquote&gt;
    &lt;p&gt;For example.&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>

Make Your Jekyll Website Amazing

2017-03-20T00:00:00+00:00

Jekyll can give you the possibility to make awesome websites in minutes. That are more faster than major other sites in the world

How you can make an Amazing Website?

Use this template to generate a great jekyll website via a full of slide system make by fullpage.js and build quick your pages using the last version of Bootstrap 4.

Helium Theme Syntax Highlight Example

2017-02-15T00:00:00+00:00

An example post about code insertion into posts.

Testing code snippet highlight

The following example shows how to highlight a piece of code throughout the use of Javascript:

    /*jshint browser: true, strict: true, undef: true */
    /*global define: false */

    ( function( window ) {

    'use strict';

    // class helper functions from bonzo https://github.com/ded/bonzo

    function classReg( className ) {
      return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
    }

    // classList support for class management
    // altho to be fair, the api sucks because it won't accept multiple classes at once
    var hasClass, addClass, removeClass;

    if ( 'classList' in document.documentElement ) {
      hasClass = function( elem, c ) {
        return elem.classList.contains( c );
      };
      addClass = function( elem, c ) {
        elem.classList.add( c );
      };
      removeClass = function( elem, c ) {
        elem.classList.remove( c );
      };
    }
    else {
      hasClass = function( elem, c ) {
        return classReg( c ).test( elem.className );
      };
      addClass = function( elem, c ) {
        if ( !hasClass( elem, c ) ) {
          elem.className = elem.className + ' ' + c;
        }
      };
      removeClass = function( elem, c ) {
        elem.className = elem.className.replace( classReg( c ), ' ' );
      };
    }

    function toggleClass( elem, c ) {
      var fn = hasClass( elem, c ) ? removeClass : addClass;
      fn( elem, c );
    }

    var classie = {
      // full names
      hasClass: hasClass,
      addClass: addClass,
      removeClass: removeClass,
      toggleClass: toggleClass,
      // short names
      has: hasClass,
      add: addClass,
      remove: removeClass,
      toggle: toggleClass
    };

    // transport
    if ( typeof define === 'function' && define.amd ) {
      // AMD
      define( classie );
    } else {
      // browser global
      window.classie = classie;
    }

    })( window );

Code highlighting with rounge and Prism

Another snippet rendered with the CSS code syntax:

    @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Gentium+Book+Basic');
    /* Reset CSS
     * --------------------------------------- */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td {
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration:none;
    }
    table {
        border-spacing: 0;
    }
    fieldset,img {
        border: 0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-weight: normal;
        font-style: normal;
    }

Using snippet rendered with the HTML code syntax


<div id="fullpage">
    <div data-anchor="0section" class="section" id="section0">

        <h1 class="heavy">Ready to follow <br />your <span class="pink">dreams?</span></h1>
        <br /><h2 class="large-blur">
            <span class="highlight-container"><span class="highlight">
                Put your dreams on first and follow that!
            </span></span>

            <br />

                            

        </h2>
            <div class="intro-scroll-down">
              <a data-menuanchor="1section" href="#1section">
                <span class="mouse">
                  <span class="mouse-dot"></span>
                </span>
              </a>
            </div>



    </div>

Check the markdown of this example in order to fully comprehend the correct syntax.

Here you can find more detailed information.

Testing Locally Helium Jekyll

2017-01-17T00:00:00+00:00

In this tutorial I will teach you how to test your Jekyll Bootstrap3 site locally.

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as “a simple, blog aware, static site generator”.

To test your site locally, you’ll need

Installing ruby

There are lots of different ways to install ruby.

In Mac OS X, older versions of ruby will already be installed. But I use the Ruby Version Manager (RVM) to have a more recent version. You could also use Homebrew.

In Windows, use RubyInstaller. (In most of this tutorial, I’ve assumed you’re using a Mac or some flavor of Unix. It’s possible that none of this was usable for Windows folks. Sorry!)

Installing the github-pages gem

Run the following command:

    gem install github-pages

This will install the github-pages gem and all dependencies (including jekyll).

Later, to update the gem, type:

    gem update github-pages

Testing your site locally

To construct and test your site locally, go into the directory and type

    jekyll build

This will create (or modify) a _site/ directory, containing everything from assets/, and then the index.md and all pages/*.md files, converted to html. (So there’ll be _site/index.html and the various _site/pages/*.html.)

Type the following in order to “serve” the site. This will first run build, and so it does not need to be preceded by jekyll build.

    jekyll serve

To make jekyll automatically re-build your changes you can also add the --watch option:

    jekyll serve --watch

Now open your browser and go to http://localhost:4000.

Read the complete tutorial on http://jekyllrb.com/docs/usage/.

Testing images

#Code

	
	![Lost in space](https://heliumjk.github.io/assets/img/big/lost_in_404_space.jpg){: .image-fluid }

IMG With description on hover

#Code

	
	![Lost in space with description](https://heliumjk.github.io/assets/img/big/universe1.jpg "Description of lost in space image"){: .image-fluid }

With floating in markdown

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.

#Code


	| 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://heliumjk.github.io/assets/img/big/universe2.jpg "Description of lost in space image"){: .image-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

#Code


	| ![Lost in space with description](https://heliumjk.github.io/assets/img/big/universe3.jpg "Description of lost in space image"){: .image-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 embed sample

#Code

	<div class="video-container">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/ikbYpAHkurs?ecver=1" frameborder="0" allowfullscreen></iframe>
	</div>

License

MIT

Hello World

2017-01-01T00:00:00+00:00

Hello world! Is the first post on helium jekyll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat luctus neque eget commodo. Sed a molestie lorem. Fusce lectus mauris, vulputate sollicitudin ullamcorper ut, semper at risus. Nunc porta ut velit non fringilla. Pellentesque egestas eros vitae suscipit imperdiet. Cras imperdiet a velit sit amet placerat. Morbi dolor quam, semper ac venenatis ac, pretium at ex. Suspendisse fermentum mi sit amet risus congue ullamcorper. Sed sed ultrices libero. Cras pulvinar dui efficitur felis maximus, ac dictum leo egestas. Pellentesque ut dictum odio. Aliquam varius viverra orci, quis blandit mi blandit vitae. Donec non semper augue, ut consectetur ligula. Aenean tellus tortor, sagittis sed iaculis quis, imperdiet et ex. Mauris id libero sed diam euismod pharetra.

Mauris nec pulvinar elit, in fermentum leo. Curabitur volutpat ullamcorper diam id dapibus. Donec dolor eros, dictum vitae quam sit amet, imperdiet dapibus libero. Nullam vel ligula non velit tincidunt volutpat. Maecenas at magna enim. Nunc quis molestie lectus. Maecenas facilisis finibus consequat.

Curabitur vitae elementum nulla, at cursus elit. Suspendisse elementum auctor lorem eu sodales. Curabitur accumsan efficitur maximus. Ut purus lacus, dapibus ut elit vitae, imperdiet ultrices diam. Donec pharetra quis urna et auctor. Sed non augue vel lacus scelerisque mattis. In ac eros quis felis laoreet luctus vitae eget libero.

Sed egestas lectus urna, et lacinia nulla suscipit nec. Sed sed consequat nulla. Morbi lobortis ex tellus, quis aliquam magna gravida quis. Ut mattis dui nec euismod tempor. Ut sit amet felis tincidunt, ultrices ligula eu, dapibus nulla. Aliquam efficitur magna in elit placerat, vel placerat augue interdum. In hac habitasse platea dictumst. Sed ac mollis lacus. Praesent eleifend justo ut nunc fermentum, eget luctus dui ultricies.

Integer interdum fringilla commodo. Integer finibus purus diam, at gravida metus interdum ac. Curabitur posuere, felis facilisis consectetur convallis, enim nulla ultricies nisi, at pretium sapien lorem ac diam. Integer ac ex consequat, facilisis justo sit amet, auctor quam. Curabitur luctus suscipit ante sed aliquet. Donec non molestie sapien, ut pellentesque odio. In lobortis porta auctor. Sed eu convallis est, eget ultricies ligula. Maecenas facilisis laoreet velit, eget rutrum ligula malesuada in. Vestibulum sapien lacus, congue ut mi ut, faucibus dapibus massa. Morbi vel ligula eget lacus vehicula tincidunt.

Helium Jekyll

Helium Jekyll Theme Markdown Examples

Examples

in markdown cannot guarantee it work well

in markdown

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Subtitle h class using {:.sub-title}

Video

Not in markdown

in HTML

Paragraphs

Alerts

in markdown cannot guarantee it work well

in markdown

Labels

in markdown cannot guarantee it work well

in markdown

Class nesting samples

Tables

in markdown

Dynamic ADS Block

It autoresize in base of the container dimensions, avaible if you edit _confi.yaml file

in HTML and liquid

Copy Sample

A Study In Scarlet

PART I.

Mr. Sherlock Holmes

More content

in markdown

Other features

Lists (Uneder construction)

LINKS

IMAGES

CODE

Markdown:

Make Your Jekyll Website Amazing

How you can make an Amazing Website?

Helium Theme Syntax Highlight Example

Testing code snippet highlight

Code highlighting with rounge and Prism

Using snippet rendered with the HTML code syntax

Testing Locally Helium Jekyll

Installing ruby

Installing the github-pages gem

Testing your site locally

Testing images

#Code

IMG With description on hover

#Code

With floating in markdown

#Code

#Code

Video embed sample

#Code

License

Hello World

Subtitle h class using `{:.sub-title}`