Octopress’s default plugins for including code snippets/blocks enable users to share code. This is good for open source technologies. Without intelligent and generous users of open source tools, I won’t be able to
While I was writing my previous post, which was about a basic pandoc template for generating a $\rm \LaTeX$ PDF file, I would like to include a Gist in my post.
Some users will say that Octopress’s default fuctionality {%
include_code %}
can highlight the code.
Why does one think of embedding a Gist in Octopress?
To easily modify the embedded code block.
Octopress’s default plugins: rake generate
is slow, especially
when there’s a lot of contents. (say, more than a hundred posts)
Embedded Gist: {% gist gist_id [<file>] %}
is
responsible for embedding the code snippet for <file>
—changing
the contents of the Gist for <file>
doesn’t change this piece
of Jekyll code. Moreover, posting code to Gist is quite fast if
you have Gist.vim plugin installed in Vim.6
However, if one uses Gist instead of Octopress’s default plugins for sharing code, one will see that the line numbers aren’t in the right position.
In a comment left by Brandon Mathis, the father of Octopress, in Octopress issue #847, he said that external contents in Octopress posts/pages weren’t good. However, with Gist.vim and fugitive.vim, managing code snippets in multiple places (i.e. the Git repository for one’s Octopress blog, and the Gist for the code snippet) isn’t so difficult.
There’s a solution on devspade.7 However, due to my poor
knowledge on Ruby, I couldn’t understand what was actually done in
plugins/git_tag.rb
.
Therefore, I followed Alex Rothberg’s approach of changing a few CSS properties of embedded Gists.8
After an hour of testing, I realized that changing
sass/partials/_syntax.scss
would suffice. There’s no need to
actually change .themes/classic/sass/partials/_syntax.scss
unless
one wants to customize the theme.9 Now I can use Gists in my
posts.10
Refer to Testing jQuery Image Popup for details. ↩
Refer to Octopress Category List for details. ↩
Refer to Fixing Broken URLs in the Catetory List for details. ↩
Refer to Zooming SVG in Web Browsers for details. ↩
Refer to Posting Code to Gist Efficiently for details. ↩
Caffrey, B. Aug 6, 2014. Fixing Gist Embeds in Octopress. Retrieved from http://devspade.com/blog/2013/08/06/fixing-gist-embeds-in-octopress/ ↩
For details, refer to
Before fixing the embedded Gists in Octopress, I didn’t know how
the SCSS files under .themes/classic/partials/
affect those
under sass
. Therefore, to prepare for a possible failure, I
divided the process into two Git commits.
Commit 233b333: I changed
.themes/classic/sass/partials/_syntax.scss
, according to
cancan101/cancan101.github.io@d30d956
Commit e5668de: I ran the command for installing a theme, and
found out that my changes to the HTML and XML files were lost,
just like commits f687612 and fc59e2a. Though running git
checkout -- source/_includes/<file>
could revert the <file>
to
its previous version, it’s still troublesome.
For a successful example, you may refer to a Gist in my previous post. ↩
1
2
3
4
5
6
{% codeblock Change the <abbr title="EXtensible Markup Language">XML</abbr> file as well lang:xml http://www.ewal.net/2012/09/08/octopress-customizations/#categories-in-the-atom-feed %}</p>
<entry>
<!-- other elements -->
<content type="html"><![CDATA[{{ post.content | remove_linenumbers | remove_bigfig | expand_urls: site.url | cdata_escape }}]]></content>
</entry>
<p>{% endcodeblock %}
However, I couldn’t generate the site. I tried HTML encoding the
contents and surrounding them using a <pre>
tag, instead of a
{% codeblock %}
tag, but this approach also
failed.
Walter could post some Liquid code, but there’s no source for his
blog on GitHub, and he no longer uses Octopress anymore. Therefore,
I viewed Clapper’s code since he wrote some Liquid template tags for
installing an image popup plugin. In the blog post
introducing his plugin, there’s a link that took readers to another
post about how his use of Neiner’s
jQuery table of contents plugin on Octopress. I studied
the markdown source of the post, and saw that a
{% raw %}
tag was used to surround the interior
of the codeblock which contained Liquid code.
See My Settings for RSS (1) for details. ↩
Note: I can now figure out a way to work with both UltraBlog and WordPress.com’s built-in online code highlighter. See my newer post for details.
Markdown is easy to write. However, writing code with (I’ve found a way to use the
built-in SyntaxHighlighter now because I’ve realised that a blank line
in Markdown will be changed to a code
tag (surrounded with []
) using UltraBlog in Vim doesn’t work. In
order to post some code, one needs to
use 3 backticks.<p>
tag in HTML. Thus, don’t put
any blank lines right above and below the the <code>
tags.)
1
2
element1 = document.getElementById(“foo”);
element1.innerHTML = “Hello world!”;
There’s some shortcomings of the above method. If you need to copy a
list of source code, you’ll need to browse the source code, provided
that the “gutter” option of the code list is “true”,
which is the default.
Moreover, if you include source code that consists of <angled
blocks>
in a blog post written in Markdown using the UltraBlog
plugin, then the angled block may be interpreted as an HTML tag
element, such as the statement #include <iostream>
in a C++ program.
More importantly, I’ve found out that this apporach
doesn’t work with UltraBlog. The above code list verifies
this assertion.
Figure 1: This is a screenshot of the “code list” in UltraBlog.vim. Markdown quick reference suggests the use of 3 backticks.
Figure 2: The above figure shows how the source code for the “code list” (in lines 12–15 in UltraBlog.vim, see Figure 1) is interpreted.
If you’re a Blogger user who has made use of SyntaxHighlighter to share your source code online, you’ll know that the copy function depends on Adobe Flash. I don’t have time to figure out whether this is a JavaScript trap, but it’s better if I can find a way to avoid proprietary softwares.
Moreover, the languages supported by WordPress.com is not as much as Gist. For instance, Gist can highlight code in a VIMRC file, but the plugin used by WordPress.com can’t.
According to WordPress’s official support, using Gist should be much easier. The following is the result.
Posted via UltraBlog.vim.
]]>One of my earlier posts suggests that SyntaxHighlight supports
only one language in a pre
tag without proof. Before embedding
a source code list to show this, I’ll make more assertions and then
verify them.
highlight.js has the support, while google-code-prettify doesn’t. For example, you want to attach the following Matlab code to your blog entry. SyntaxHighlight doesn’t have the Matlab support. For highlight.js, here’s the result.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function [rr_array] = nest_fun(x,a)
%function to find sets of polynormials.
% a: set of constants, [A B C]
% x: variables in array
% Example: rr=nest_fun(2:10,[1 2 4;2 4 8])
n = size(a);
for i = 1:n
A = a(i,1);B = a(i,2);C = a(i,3);
rr_array{1,i}=[‘A=’,num2str(A),’, B=’,…
num2str(B),’, C=’,num2str(C)];
rr_array{2,i}=polyx(x);
end
function r = polyx(xx)
r = A.<em>x.^2 + B.</em>x +C;
end
end
When I was writing the post, highlight.js didn’t worked right, but as I gave up trying it and view this post on the next day, things just go fine.
We just see how google-code-prettify works.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function [rr_array] = nest_fun(x,a)
%function to find sets of polynormials.
% a: set of constants, [A B C]
% x: variables in array
% Example: rr=nest_fun(2:10,[1 2 4;2 4 8])
n = size(a);
for i = 1:n
A = a(i,1);B = a(i,2);C = a(i,3);
rr_array{1,i}=[‘A=’,num2str(A),’, B=’,…
num2str(B),’, C=’,num2str(C)];
rr_array{2,i}=polyx(x);
end
function r = polyx(xx)
r = A.<em>x.^2 + B.</em>x +C;
end
end
Code copied from Applications of Matlab in Engineering.
Note: In the official README, it’s said that we
specify the lang-*
class by its file extension (i.e. m
), but in
the page that display the source code of lang-matlab.js on Google
Code, it points to the author’s Github repository,
which has a README file. According to that file, the HTML tag should
be <pre class="prettyprint lang-matlab">
, instead of <pre
class="prettyprint lang-m">
.
So when one embeds the above source code list using google-code-prettify, one would write
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</p>
<pre class="prettyprint lang-matlab">function [rr_array] = nest_fun(x,a)
%function to find sets of polynormials.
% a: set of constants, [A B C]
% x: variables in array
% Example: rr=nest_fun(2:10,[1 2 4;2 4 8])
n = size(a);
for i = 1:n
A = a(i,1);B = a(i,2);C = a(i,3);
rr_array{1,i}=['A=',num2str(A),', B=',...
num2str(B),', C=',num2str(C)];
rr_array{2,i}=polyx(x);
end
function r = polyx(xx)
r = A.*x.^2 + B.*x +C;
end
end
</pre>
<p>
Let’s go back to the topic.
The SyntaxHighlighter code for embedding Java:
1
2
3
4
5
6
7
</p>
<pre class="brush: java">public class Hello {
public static void main(String args[]) {
System.out.println("Hello world!");
}
}</pre>
<p>
As the language in determined by brush: html
, there’s no multiple
language feature in SyntaxHighlighter.
1
2
3
4
5
6
7
</p>
<pre class="brush: java">public class Hello {
public static void main(String args[]) {
System.out.println("Hello world!");
}
}</pre>
<p>
So highlight.js can display multiple languages at one container.
1
2
3
4
5
6
7
</p>
<pre class="brush: java">public class Hello {
public static void main(String args[]) {
System.out.println("Hello world!");
}
}</pre>
<p>
So the result of google-code-prettify is similar to that of SyntaxHighlighter.
We end this essay with more results in highlight.js.
In order to embed multilingual source code in a list, highlight.js is what you need, but if you insist on using google-code-prettify, here’s some sample code.
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
</p>
<pre class="prettyprint">public class Hello {
// Java code sample
public static void main(String args[]) {
System.out.println("Hello world!");
}
}
<!-- CSS code-->
.sidebar #sidebar, .ss{
margin-top: 12px !important;
overflow-y: scroll !important;
}
# C++ code
#include
using namespace std;
int main(void)
{
cout << "Hello world!" << endl;
return 0;
}
</pre>
<p>
In my previous post titled
Fast Compilation and Execution of Source Code, I included a
makefile
. After I’ve been familiar with SyntaxHighlighter, I
changed the code of the makefile
so that the new tool is used.
However, as I’ve written in my earlier post,
SyntaxHighlighter has no makefile support, while highlight.js
and google-code-prettify have that feature.123
I think, therefore I am.
In order to be sure about their claims, I’ve done a test and the results are as follow.
1
2
3
4
hello: hello.c
gcc -o hello hello.c
clean:
rm -f hello
Maybe my makefile
is too simple that it lacks some typical features
for the automatic language recognition of highlight.js. Let’s see
the sample code copied from the official demo.
1
2
3
4
5
6
7
8
9
10
11
12
13
# Makefile</p>
<p>BUILDDIR = _build
EXTRAS ?= $(BUILDDIR)/extras</p>
<p>.PHONY: main clean</p>
<p>main:
@echo “Building main facility…”
build_main $(BUILDDIR)</p>
<p>clean:
rm -rf $(BUILDDIR)/*
1
2
3
4
hello: hello.c
gcc -o hello hello.c
clean:
rm -f hello
Let’s see a real one.
1
2
3
4
5
6
7
8
9
10
11
12
13
# Makefile</p>
<p>BUILDDIR = _build
EXTRAS ?= $(BUILDDIR)/extras</p>
<p>.PHONY: main clean</p>
<p>main:
@echo “Building main facility…”
build_main $(BUILDDIR)</p>
<p>clean:
rm -rf $(BUILDDIR)/*
Unluckily, I can’t figure out the way to include a tab, instead of
whitespaces, for makefiles. Anyways, one who use makefiles will know
that after running make
on the first day.