better exporting of #+BEGIN_SOURCE blocks

[shackra]

org-mode makes silly things for rendering code block when exporting to HTML. The thing is I made some questions at emacs stackexchange, and a very loving and kind developer pasted his code, all necesary elisp code, to export such code blocks as <pre><code> tags and compatible with highlight.js

Here is his answer with complete code snippets.

Hence, I was thinking that this project would make a good use of such code snippets if they were integrated. I already enjoy the benefits of such change, as for instance: the exported source blocks are responsive-design friendly.

[sillykelvin]

Thanks for the link. However, org-page does not use org-mode's code block rendering(insert so many ugly tags), instead, org-page will export code blocks in plain text, and then render these blocks with prettify.js.

[shackra]

Uh, that wasn't the case for me with org-page until I integrated the code I'm linking

[sillykelvin]

Could you please paste a link here to the generated html source by that code snippet?

[shackra]

sure! I have a begginers tutorial about Emacs, I have a lot of code blocks on it, check it if you want.

You can also check the author of those code snippets blog, here

[sillykelvin]

I viewed the source, the code below is generated by org-page:

<pre class="src src-C++">
//...
</pre>

the code below is generated by the snippet you mentioned:

<pre><code class="lang-emacs">
;; ...
</code></pre>

Seems the only difference is the extra <code> tag?

BTW, your site's theme is really nice. :-)

[shackra]

El 18 de marzo de 2015 a las 11:32 PM Kelvin Hu notifications@github.com
escribió:

I viewed the source, the code below is generated by org-page:

<pre class="src src-C++">
//...
</pre>

the code below is generated by the snippet you mentioned:

<pre><code class="lang-emacs">
;; ...
</code></pre>

Seems the only difference is the extra <code> tag?

Well, yeah, that and some matching names since highlight.js may not have
highlighters for some languages supported in Emacs through major modes... but
I'm not sure.

BTW, your site's theme is really nice. :-)

haha, Thank you! I'm learning web design!

Pax et bonum.
Jorge Araya Navarro.
ES: Diseñador Publicitario, Programador Python y colaborador en Parabola
GNU/Linux-libre
EN: Ads Designer, Python programmer and contributor Parabola GNU/Linux-libre
EO: Anonco grafikisto, Pitino programalingvo programisto kai kontribuanto en
Parabola GNU/Linux-libre
https://es.gravatar.com/shackra

[sillykelvin]

Currently org-page uses prettify.js to render code blocks, and the <pre>...</pre> tag pair serves well for that, sorry that if there is no obvious benefit of the extra <code>...</code> tag pair, I prefer to no change.

However, you can keep that code snippet for your own generation. :-)

[shackra]

There is one benefit: when the code is more width than the area where it is wrapped, a scroll bar is offered by the web browsers. This is critical for responsive design!

El 21 de marzo de 2015 10:35:53 CST, Kelvin Hu notifications@github.com escribió:

Currently org-page uses prettify.js to render code blocks, and the
<pre>...</pre> tag pair serves well for that, sorry that if there is
no obvious benefit of the extra <code>...</code> tag pair, I prefer
to no change.

However, you can keep that code snippet for your own generation. :-)

---

Reply to this email directly or view it on GitHub:
#110 (comment)

Enviado desde mi teléfono con K-9 Mail.

[sillykelvin]

Isn't the scroll bar controlled by CSS?

[shackra]

If you only use the

 tag, no, no scroll bar is shown

El 24 de marzo de 2015 09:06:49 CST, Kelvin Hu notifications@github.com escribió:

Isn't the scroll bar controlled by CSS?

Reply to this email directly or view it on GitHub:

#110 (comment)


Enviado desde mi teléfono con K-9 Mail.

[cpaulik]

One additional problem is that prettify.js does not seem to support emacs-lisp. See e.g. http://blog.pschorf.com/blog/2016/02/28/spacemacs-blogging/ . In the first code block it thinks that 'org-page-theme-kactus starts a string.

[sillykelvin]

I find two related issues at prettify.js' repo:
googlearchive/code-prettify#159
googlearchive/code-prettify#176
Please have a try to see if it works.

[cpaulik]

Thanks.

Exporting emacs lisp as lisp and adding
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-lisp.js' type='text/javascript'></script> to the template fixes the string issue.

I'm not sure how big the differences between lisp and emacs-lisp are and if this could be a source of problems.

[lnlsn]

Hi!
I am using highlightjs in my website built with org-page.

My solution was reduce main.js to:

$(document).ready(function() {
  $('pre').each(function(i, block) {
    var self = $(this);
    self.removeAttr('class');
    self.html('<code>' + self.html() + '</code>');
    hljs.highlightBlock(block);
  });
});

This code:

• Remove class attribute from <pre> HTML Tag
• Put <code> between <pre> and his content.
• hljs.highlightBlock(block); - from highlightjs usage - Custom Initialization section.

And now highlightjs works for pre.src and pre.example. I do not use prettify anymore.

In time: Kelvin Hu thank you so much for org-page.