30 August 2014

I don’t always blog, but when I do I’m very picky about styling. You probably can’t tell by the state of this blog – I haven’t added much custom styling at all. This is actually almost fully the out-of-the-box Jekyll Bootstrap site. I’m working on a very cool (imo) style for this blog, but it’s nowhere near ready yet.

But now that I’m into programming, I figured I am going to want to blog using code snippets here and there. I like a good syntax highlighting color scheme, and I’ve seen some very impressive ones on some peoples’ blogs – pre styling that made programming look downright sexy. So I got to work.

The first thing I did - tangential to this blog post - was install in assets all of the pygment stylesheets from here, bulk-change some of the class names to work with what Pygment outputs, and then add some code to my Jekyll layouts so that all I have to do is change highlighter_style: name in the _config file to match the file name.css for whatever stylesheet I wanted, or change the same property in the frontmatter of any post or page – so now it’s that easy for me to change to a different syntax highlighter.

Now with those style sheets taken care of, my thoughts came to this: with my prior experience with Jekyll (I had a Jekyll blog on this same domain that I completely scrapped), I remember having one problem that really bugged me: highlight lang linenos. I wanted line numbers presented with my code, but just using {% highlight python linenos %} placed the numbers inline with the code – an obvious problem for copy-pasting. (btw, if you’re wondering how I just posted liquid tags within a Jekyll post, check out this link or view my source code)

I’ve been interested for a long time in potentially writing guides and books on programming or web design, and so this functionality is actually pretty important to

Some googling and I found out how to get code snippets produced by pygments that allowed for copy-pasting without copying the line numbers. thanpolas posted about it. You’ll see a similarity between the title of his post and the title of my post, but I’ve gone a step further than him.

What I learned from him was that {% highlight python linenos=table %} outputs the code in a separate pane from the line-numbers. GREAT PROGRESS! I tried it and it worked!

Well…sorta.

In his post, thanpolas notices line wrapping problems, comes up with a solution that he acknowledges is incompatible with GitHub pages, and calls it a day. But that wasn’t good enough for me.

I’ve solved it, in a way that doesn’t have wrapping problems, and works out-of-the-box in Jekyll for GitHub, no special Ruby scripts required. Here, take a look:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"""
A program for coding and decoding messages
"""
SHIFT = 1

def shift_coder(str):
	"""
	Takes a string and codes it
	"""
	characters = list(str)
	coded_characters = []
	
	for dummy_char in characters:
		ascii_int = ord(dummy_char)
		if ascii_int in range(32) + range(32, 65) + range(91, 97) + \
		range(123, 128):
			new_char = chr(ascii_int)
		elif ascii_int in range(65, 91):
			new_char = chr(((ord(dummy_char) + SHIFT - 65) % 26) + 65) # making this line as long as possible to test no-wrapping
		elif ascii_int in range(97, 123):
			new_char = chr(((ord(dummy_char) + SHIFT - 97) % 26) + 97)
			
		coded_characters.append(new_char)
		
	coded_str = "".join(coded_characters)
	return coded_str

def shift_decoder(str):
	"""
	Takes a coded string and decodes it into the original message
	"""
	characters = list(str)
	coded_characters = []
	
	for dummy_char in characters:
		ascii_int = ord(dummy_char)
		
		if ascii_int in range(32) + range(32, 65) + range(91, 97) + \
		range(123, 128):
			new_char = chr(ascii_int)
		elif ascii_int in range(65, 91):
			new_char = chr(((ord(dummy_char) - SHIFT - 65) % 26) + 65)
		elif ascii_int in range(97, 123):
			new_char = chr(((ord(dummy_char) - SHIFT - 97) % 26) + 97)
			
		coded_characters.append(new_char)
		
	coded_str = "".join(coded_characters)
	return coded_str

In addition to the line-wrapping problems that he saw, I also noticed the following things in the case of my blog:

  • I wanted a responsive site (hence going with bootstrap) but the way it was showing up initially, the width of the code div was wider than its container when I resized to a phone-sized display, meaning that the whole page had a horizontal scroll – I just wanted a horizontal scroll on the code div itself.

  • When I resized the display to phone-size, the line numbers on the left for some reason started wrapping, so instead of saying ‘12’, line 12 had the 2 below the 1, and the whole thing just got messed up altogether.

linenos mistake

I added only a total of 12 lines to my css file - and that’s 12 prettified lines - though I’m not sure how much of the solution came from using Bootstrap in the first place. Here’s what I added:

1
2
3
4
5
6
7
8
9
10
11
12
table.highlighttable {
  overflow-x:auto;
  display:block;
}

table.highlighttable td.code {
  width:100%;
}

pre code {
  white-space: pre;
}

The first 8 lines above solved the problem of overflow in the code area - there is only a horizontal scroll in the code area now, not affecting the entire page.

The last 3 solved the problem of the linenumbers wrapping strangely.

Now it’s solved.



blog comments powered by Disqus