Centering exported source code blocks

[yjwen]

Centering exported source code blocks

[yjwen]

Hi, Tassilo,

Currently org-reveal cannot support code centering directly, because code is something verse, where white space and indention matters. But paragraph centering will ignore white space and force texts to center line by line. So if you use:

#+BEGIN_CENTER
#+BEGIN_SRC c++
  class some_class {
    some_class() {}
  };
#+END_SRC
#+END_CENTER

The HTML produced will have odd unexpected code indention.

I have a workaround that puts codes in an HTML table of 1 row and 1 column, and center that table. A sample Org file is as below:

* Heading 1

#+BEGIN_HTML
<center><table width="40%"><tr><td>
#+END_HTML
#+BEGIN_SRC c++
  class some_class {
    some_class() {}
  };
#+END_SRC
#+BEGIN_HTML
</td><tr></table></center>
#+END_HTML
 - Bla Bla Bla Bla Bla Bla Bla Bla
 - Bla Bla Bla Bla Bla Bla Bla Bla

You can adjust the table width in the HTML label <table> to fit your codes in.

Regards,
Yujie

[tsdh]

Hey @yjwen, somehow your workaround doesn't work for me. Here's the concrete slide:

* Ex.: Relational Querying

#+BEGIN_HTML
<center><table width="40%"><tr><td>
#+END_HTML
#+BEGIN_SRC clojure
(defn grandparento [model grandparent grandchild]
  (fresh [child]
    (+Male model grandparent)
    (+->children model grandparent child)
    (+->children modes child grandchild)))
#+END_SRC
#+BEGIN_HTML
</td><tr></table></center>
#+END_HTML

  | grandparent | grandchild | semantics                                     |
  |-------------+------------+-----------------------------------------------|
  | ground      | ground     | predicate                                     |
  | ground      | fresh      | all grandchildren of grandparent              |
  | fresh       | ground     | all grandparents of grandchild                |
  | fresh       | fresh      | all grandparents with all their grandchildren |

When it's exported, the slide is just a section containing a div with a pre for the code, and the following table. The center containing the table doesn't show up at all. It seems to be simply ignored.

The same happens when I put a #+BEGIN/END_CENTER around the code. In the generated HTML, there's no difference...

I'm running current git versions of org and org-reveal.

Maybe that problem can be solved using CSS in #+REVEAL_EXTRA_CSS? I mean, can't I specify somehow that inside a div of class org-src-container the pre-element has to be centered? (I know, that's more of a CSS than org-reveal question).

[yjwen]

Hi, Tassilo,

I tried your slide. The workaround works, as the snapshot shows. I am using the latest git version Org-mode and org-reveal too. Not sure what is wrong.

There is a typo in your slides, at the second BEGIN_HTML section, it should be </tr> than <tr>. But even with the typo browser can render properly. Could you send me the exported HTML file for a check?

Regards,
Yujie

[tsdh]

Hi! Fixing the typo doesn't help either. I use org-reveal 525a554 and Org-mode version 8.1.1 (release_8.1.1-7-gaecdf5 @ /home/horn/Repos/el/org-mode/lisp/) with a recent emacs 24 bzr checkout.

Here's a minimal org file: https://gist.github.com/tsdh/6492120
Here's the exported html file: https://gist.github.com/tsdh/6492130

As you can see, there's no center / table around the code block...

[yjwen]

Hi,

It seems the HTML block is not exported. Should be something related to the HTML exporter. Could you try a normal HTML exporting by C-c C-e h h and check whether the raw HTML contents are exported?

Yujie

[tsdh]

With the normal html export (C-c C-e h h) the center and table wrapping the code block are there.

[yjwen]

Sorry. My fault. I have some local changes that are not committed yet. Now committed. Please pull and try again.

[tsdh]

Then it works. Thanks a lot!

[kaushalmodi]

Hi, I am seeing the same issue. I made the table width 200% but the code is not centering.

  #+BEGIN_HTML
  <center><table width="200%"><tr><td>
  #+END_HTML
  #+BEGIN_SRC verilog
  const bit [7:0] R_CHARACTER     = 8'b000_11100; // The /K28.0/ character (making the comment even longer)
  const bit [7:0] A_CHARACTER     = 8'b011_11100; // The /K28.3/ character (making the comment even longer)
  const bit [7:0] Q_CHARACTER     = 8'b100_11100; // The /K28.4/ character (making the comment even longer)
  #+END_SRC
  #+BEGIN_HTML
  </td></tr></table></center>
  #+END_HTML