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: https://github.com/kelvinh/org-page/issues/110#issuecomment-84388388

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:
https://github.com/kelvinh/org-page/issues/110#issuecomment-85543726


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: https://github.com/google/code-prettify/issues/159 https://github.com/google/code-prettify/issues/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.