2014-01-08

Testing Online Code Syntax Highlighters for Blogs (6): Multilingual Source Code Display in Web Pages

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-source-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.
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

highlight.js works on some computer(s).
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.
Code copied from Applications of Matlab in Engineering. I'm not the only one to find out that the Matlab support of highlight.js is defective. [1]
We just see how google-code-prettify works.
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
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
<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>
Let's go back to the topic.

SyntaxHighlighter

The SyntaxHighlighter code for embedding Java:
<pre class="brush: java">public class Hello {
    public static void main(String args[]) {
        System.out.println("Hello world!");
    }
}
</pre>
As the language in determined by brush: html, there's no multiple language feature in SyntaxHighlighter.

highlight.js

<pre class="brush: java">public class Hello {
    public static void main(String args[]) {
        System.out.println("Hello world!");
    }
}
</pre>
So highlight.js can display multiple languages at one container.

google-code-prettify

<pre class="brush: java">public class Hello {
    public static void main(String args[]) {
        System.out.println("Hello world!");
    }
}
</pre>
So the result of google-code-prettify is similar to that of SyntaxHighlighter.

Further results of highlight.js

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.
<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 <iostream>
    using namespace std;

    int main(void)
    {
        cout << "Hello world!" << endl;
        return 0;
    }
</pre>

Reference:
[1]: https://github.com/darcyclarke/Repo.js/issues/14

No comments:

Post a Comment