Designing dynamically generated html from Jekyll

I have recently decided to change my code block to contain a header for the programming language that I am using. However, I also use Jekyll to construct my blog. Jekyll scans my Markdown files and dynamically generates code blocks with highlighting from Pygments.

For example to display Ruby code. In my markdown I would write:

1
2
3
4
5
6
7
8
9
10
{% highlight Ruby linenos %}


for current_iteration_number in 1..100 do
   puts "I have  #{current_iteration_number} problems-"
   puts "and Ruby is not one."
end


{% endhighlight %}

Will look like this:

1
2
3
4
for current_iteration_number in 1..100 do
   puts "I have  #{current_iteration_number} problems-"
   puts "and Ruby is not one."
end

I wanted to create a title bar for my code block that would label the current language it was showing. However, since the code block is dynamically generated generated, it is hard to customize the block with just css alone. In addition, I needed some way to inform the header of the language I am showing. Jekyll with pygments generates the html for a code block.

The ruby code will look like this:

1
2
3
4
5
6
7
<div class="highlight">
	<pre>
		<code class="language-ruby" data-lang="ruby">
		...
		</code>
	</pre>	
</div>	

I decided to create a container class so that I can position the title bar using relative/absolute positioning.However. since Jekyll forms the html at compilation, I can’t really modify the code before its generated. This is where Jquery can be used.

For example, to create a Bash title bar, I would use:

1
2
3
4
5
6
7
8
9
$( document ).ready(function() {
     
       $("pre").addClass("terminal");
	   
		 $("<span>",{
	       rel:'  Bash'
		   }).appendTo("pre:eq(0)");

});	

The pre:eq(0) allows me to keep track of my code blocks where 0 is my first and 1 is my second. After the script the html should look like this:

1
2
3
4
5
6
7
8
<div class="highlight">
	<pre class="terminal">
		<code class="language-ruby" data-lang="ruby">
		...
		</code>
		<span rel="  Ruby"></span>	
	</pre>	
</div>	

Now I just need to edit the css of my added classes to form the title bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.terminal
{
position: relative;
}



span[rel]:before
{
content: attr(rel);
color: #343434;
font-family: Raleway, FontMfizz, FontAwesome;
font-size: 150%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #CC7A00;
font-weight: normal;
font-style: normal;
padding: 5px 0;
text-indent: 15px;
border-radius: 4px 4px 0 0;

}

Now I have the title bar on my code blocks, however writing javascript for each code blcok is messy and a pain. In my next post I will write about how I use liquid to generate the javascript which generates the html selectors.