I love coding!

2 minute read

State of Highlighting Code in Jekyll I appear to be able to highlight syntax in Markdown files in two different ways using Jekyll.

This `is not a code` span!

\         backslash
.         period
*         asterisk
_         underscore
+         plus
-         minus
=         equal sign
`         back tick
()[]{}<>  left and right parens/brackets/braces/angle brackets
#         hash
!         bang
<<        left guillemet
>>        right guillemet
:         colon
|         pipe
"         double quote
'         single quote
$         dollar sign
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
1
2
3
4
5
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
var name = "Alice";
var function = alertMessage(){
  alert("Hello, " + name);
  var name = "Bob";
};
alertMessage();
<pre>
```javascript
 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function
```
</pre>
#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
    <h2>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </h2>
{% endif %}
{% endfor %}
```javascript
 var hoisting = "global variable";
    (function(){
        confirm("\"" + hoisting + "\"" + " click OK" );
        var hoisting = "local variable";
        alert(hoisting);
    })(); //self-executing function
```
center_lower_48 = [39.833333, -98.583333]
map = folium.Map(location = center_lower_48,
                 zoom_start = 4,
                 control_scale = True,
                 tiles = 'Stamen Terrain')

#shell $ pip install jupyter #

$ pip install jupyter
def cat
  puts 'I love cats'
end

def cat puts ‘I love cats’ end

The code above yields:

<div class="language-shell highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
      <code>
        <span class="nv">$ </span>pip install jupyter
      </code>
    </pre>
  </div>
</div>

However, if I use Liquid syntax in my markdown file, the output changes.

$ pip install jupyter

The code above renders to the result below.

    
      $ pip install jupyter
    
  

Please note that this difference does not appear to be documented, and is quite surprising to a Jekyll beginner. I note that in some other issues Jekyll-users appear surprised to discover that highlighting with fenced blocks is an option, because the documentation refers only to the second method.

Note that some behavior changes if I edit my _config.yml and set highlighter to none

markdown: kramdown highlighter: none # new addition The first code snippet (using Markdown delimiters) now yields the following (note missing div tags and syntax highlighting).

  
    $ pip install jupyter
  

The second snippet now yields the code below (syntax highlighting removed, but figure tags remains).

    
      $ pip install jupyter
    
  

Updated: