How to insert and highlight code in Jekyll blog post on Codepedia.org

Codever Logo

(P) Codever is an open source bookmarks and snippets manager for developers & co. See our How To guides to help you get started. Public bookmarks repos on Github ⭐🙏

This demo post displays the various ways of inserting and highlighting code in Markdown, when posting on Codepedia.org, because you know code showing is the main point of Codepedia.org

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.1

To embed code and highlight the syntax you have several possibilities:

  1. use highlight.js2, my preferred way, by simple placing the code inside <pre><code>; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:<pre><code class="html">...</code></pre>
  2. Jekyll has built in support for syntax highlighting of over 60 languages thanks to Rouge3, which is a pure-ruby syntax highlighter. It can highlight 100 different languages, and output HTML or ANSI 256-color text. Its HTML output is compatible with stylesheets designed for pygments.
  3. use code blocks, which are part of the Markdown spec, but syntax highlighting isn’t. However, many renderers – like Github’s and Markdown Here – support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer.

How the blog post is structured?

Bellow I will list some code samples in various languages hightlighted with the different possibilities.

CSS

Highlight.js

Input

<pre><code class="css">#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
</code></pre>

Result

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Jekyll liquid templates

Input

{% highlight css %}
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
{% endhighlight %}

Result

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

There is a second argument to highlight called linenos that is optional. Including the linenos argument will force the highlighted code to include line numbers. For instance, the following code block would include line numbers next to each line:

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Markdown code block

Input

```css
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
```

Result

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

HTML

Highlight.js

Input

<pre><code class="html">&lt;form action=&quot;action_page.php&quot;&gt;
  First name:&lt;br&gt;
  &lt;input type=&quot;text&quot; name=&quot;firstname&quot; value=&quot;Mickey&quot;&gt;&lt;br&gt;
  Last name:&lt;br&gt;
  &lt;input type=&quot;text&quot; name=&quot;lastname&quot; value=&quot;Mouse&quot;&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;/form&gt;</code></pre>

Result

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

As you can notice, one drawback of using highlight.js is that you need to escape the code snippets (especially html and xml), so that it doesn’t get interpreted by the browsers, but on the other hand the posts “feel” more like standard html directly in markdown; if you are using IntelliJ, like I am, you can use the String Manipulation Plugin4, or FreeFormater5 is a great online tool also for code escaping

Jekyll liquid templates

Input

{% highlight html %}
<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
{% endhighlight %}

Result

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Java

Highlight.js

Input

<pre><code class="java">/* HelloWorld.java
 */

public class HelloWorld
{
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}
</code></pre>

Result

/* HelloWorld.java
 */

public class HelloWorld
{
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}

Jekyll liquid templates

Input

{% highlight java %}
public class HelloWorld
{
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}
{% endhighlight %}

Result

public class HelloWorld
{
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}

Markdown

public class HelloWorld
{
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}

Javascript

Highlight.js

Input

<pre><code class="javascript"> var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function
</code></pre>

Result

 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function

Jekyll liquid templates

Input

{% highlight javascript %}
 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function
{% endhighlight %}

Result

 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function

Markdown

Input

```javascript
 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function
```

Result

 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function

Ruby

Highlight.js

Input

<pre><code class="ruby">module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end
</code></pre>

Result

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '–'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Jekyll liquid templates

Input

{% highlight ruby %}
module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end
{% endhighlight %}

Result

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Markdown

Input

```ruby
module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end
```

Result

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Jekyll

When you want to include Jekyll code that won’t get interpret use the liquid templates

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

Gist

Use the gist tag to easily embed a GitHub Gist onto your site. This works with public or secret gists:

Input

{% gist amacoder/ed963f13f536cc1935f6c238db28da24 %}

Result

You may optionally specify a filename after the gist_id, if you want to embed only one file:

Input

{% gist amacoder/ed963f13f536cc1935f6c238db28da24 Object.Prototype.js %}

Result

  1. https://en.wikipedia.org/wiki/Syntax_highlighting ↩

  2. https://highlightjs.org/usage/ ↩

  3. https://rouge.jneen.net/ ↩

  4. https://plugins.jetbrains.com/plugin/2162?pr=idea/ ↩

  5. https://www.freeformatter.com/string-escaper.html/ ↩

Subscribe to our newsletter for more code resources and news
About the Author

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being
Follow @adixchen
Read More

routerLink with query params in Angular html template

routerLink with query params in Angular html template code snippet Continue reading

How to not select attribute in mongoose schema

Published on April 21, 2023

Calculate life span and age in years in javascript/typescript

Published on March 31, 2023