Added columns with minipage

To get better columns styles. Added parskip inside minipages too.
yuki · Feb 8, 2024 · 650c6a4 · 650c6a4
1 parent b2287b8
commit 650c6a4
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 45 deletions.
diff --git a/2.md b/2.md
@@ -7,8 +7,39 @@ Here few examples of with images.
 
 ![this is a [dragon](https://es.wikipedia.org/wiki/Dragón)](img/cover.png){width="60%" framed=true}
 
+# Columns
+
+Example of how to get columns style (with minipage in LaTeX-PDF).
+
+:::::::::::::: {.columns }
+::: {.column width="38%"}
+![this is a dragon](img/cover.png){width="100%" framed=true}
+:::
+::: {.column width="52%" }
+Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.
+:::
+::::::::::::::
+
+With 3 columns
+
+:::::::::::::: {.columns }
+::: {.column width="30%"}
+Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.
+:::
+::: {.column width="30%" }
+![this is a dragon](img/cover.png){width="100%" framed=true}
+:::
+::: {.column width="30%"}
+Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.
+:::
+::::::::::::::
+
+
+
 ## Float image in the left side {#float-image-in-the-left-side}
 
+Float images are dificult to know how will work, but I have created two forms.
+
 ::: float-left
 ![this is a dragon](img/cover.png){.float-left framed=true width="30%"}
 
@@ -18,8 +49,6 @@ Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de
 :::
 
 ::: float-right
-Dos Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.
-
 ![this is a dragon](img/cover.png){.float-right width="45%"}
 
 Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.

diff --git a/example.html b/example.html
@@ -101,19 +101,22 @@ <h5 class="p-2 border-bottom">Índice</h5>
                 <li><a href="#images" id="toc-images"><span class="toc-section-number">3</span> Images</a>
                 <ul>
                 <li><a href="#centered-image-with-caption" id="toc-centered-image-with-caption"><span class="toc-section-number">3.1</span> Centered image with caption</a></li>
-                <li><a href="#float-image-in-the-left-side" id="toc-float-image-in-the-left-side"><span class="toc-section-number">3.2</span> Float image in the left side</a></li>
                 </ul></li>
-                <li><a href="#tables" id="toc-tables"><span class="toc-section-number">4</span> Tables</a></li>
-                <li><a href="#lorem-ipsum" id="toc-lorem-ipsum"><span class="toc-section-number">5</span> Lorem ipsum</a>
+                <li><a href="#columns" id="toc-columns"><span class="toc-section-number">4</span> Columns</a>
                 <ul>
-                <li><a href="#pyout" id="toc-pyout"><span class="toc-section-number">5.1</span> Pyout</a>
+                <li><a href="#float-image-in-the-left-side" id="toc-float-image-in-the-left-side"><span class="toc-section-number">4.1</span> Float image in the left side</a></li>
+                </ul></li>
+                <li><a href="#tables" id="toc-tables"><span class="toc-section-number">5</span> Tables</a></li>
+                <li><a href="#lorem-ipsum" id="toc-lorem-ipsum"><span class="toc-section-number">6</span> Lorem ipsum</a>
+                <ul>
+                <li><a href="#pyout" id="toc-pyout"><span class="toc-section-number">6.1</span> Pyout</a>
                 <ul>
-                <li><a href="#image" id="toc-image"><span class="toc-section-number">5.1.1</span> Image</a></li>
+                <li><a href="#image" id="toc-image"><span class="toc-section-number">6.1.1</span> Image</a></li>
                 </ul></li>
                 </ul></li>
-                <li><a href="#lorem-ipsum-1" id="toc-lorem-ipsum-1"><span class="toc-section-number">6</span> Lorem ipsum</a>
+                <li><a href="#lorem-ipsum-1" id="toc-lorem-ipsum-1"><span class="toc-section-number">7</span> Lorem ipsum</a>
                 <ul>
-                <li><a href="#pyout-1" id="toc-pyout-1"><span class="toc-section-number">6.1</span> Pyout</a></li>
+                <li><a href="#pyout-1" id="toc-pyout-1"><span class="toc-section-number">7.1</span> Pyout</a></li>
                 </ul></li>
                 </ul>
               </div>
@@ -209,12 +212,40 @@ <h1 data-number="3"><span class="header-section-number">3</span> Images</h1>
 <section id="centered-image-with-caption" class="level2" data-number="3.1">
 <h2 data-number="3.1"><span class="header-section-number">3.1</span> Centered image with caption</h2>
 <figure>
-<img src="img/cover.png" data-framed="true" width="100" alt="this is a dragon" />
+<img src="img/cover.png" style="width:60.0%" data-framed="true" alt="this is a dragon" />
 <figcaption aria-hidden="true">this is a <a href="https://es.wikipedia.org/wiki/Dragón">dragon</a></figcaption>
 </figure>
 </section>
-<section id="float-image-in-the-left-side" class="level2" data-number="3.2">
-<h2 data-number="3.2"><span class="header-section-number">3.2</span> Float image in the left side</h2>
+</section>
+<section id="columns" class="level1" data-number="4">
+<h1 data-number="4"><span class="header-section-number">4</span> Columns</h1>
+<p>Example of how to get columns style (with minipage in LaTeX-PDF).</p>
+<div class="columns">
+<div class="column" style="width:38%;">
+<figure>
+<img src="img/cover.png" style="width:100.0%" data-framed="true" alt="this is a dragon" />
+<figcaption aria-hidden="true">this is a dragon</figcaption>
+</figure>
+</div><div class="column" style="width:52%;">
+<p>Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.</p>
+</div>
+</div>
+<p>With 3 columns</p>
+<div class="columns">
+<div class="column" style="width:30%;">
+<p>Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.</p>
+</div><div class="column" style="width:30%;">
+<figure>
+<img src="img/cover.png" style="width:100.0%" data-framed="true" alt="this is a dragon" />
+<figcaption aria-hidden="true">this is a dragon</figcaption>
+</figure>
+</div><div class="column" style="width:30%;">
+<p>Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.</p>
+</div>
+</div>
+<section id="float-image-in-the-left-side" class="level2" data-number="4.1">
+<h2 data-number="4.1"><span class="header-section-number">4.1</span> Float image in the left side</h2>
+<p>Float images are dificult to know how will work, but I have created two forms.</p>
 <div class="float-left">
 <figure>
 <img src="img/cover.png" class="float-left" style="width:30.0%" data-framed="true" alt="this is a dragon" />
@@ -224,7 +255,6 @@ <h2 data-number="3.2"><span class="header-section-number">3.2</span> Float image
 <p>Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.</p>
 </div>
 <div class="float-right">
-<p>Dos Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum.</p>
 <figure>
 <img src="img/cover.png" class="float-right" style="width:45.0%" alt="this is a dragon" />
 <figcaption aria-hidden="true">this is a dragon</figcaption>
@@ -233,8 +263,8 @@ <h2 data-number="3.2"><span class="header-section-number">3.2</span> Float image
 </div>
 </section>
 </section>
-<section id="tables" class="level1" data-number="4">
-<h1 data-number="4"><span class="header-section-number">4</span> Tables</h1>
+<section id="tables" class="level1" data-number="5">
+<h1 data-number="5"><span class="header-section-number">5</span> Tables</h1>
 <p>A normal table:</p>
 <table>
 <thead>
@@ -271,14 +301,14 @@ <h1 data-number="4"><span class="header-section-number">4</span> Tables</h1>
 </tbody>
 </table>
 </section>
-<section id="lorem-ipsum" class="level1" data-number="5">
-<h1 data-number="5"><span class="header-section-number">5</span> Lorem ipsum</h1>
+<section id="lorem-ipsum" class="level1" data-number="6">
+<h1 data-number="6"><span class="header-section-number">6</span> Lorem ipsum</h1>
 <p>El paso clásico “Lorem ipsum dolor sit amet…” se atribuye a una remixación del texto de De Finibus Bonorum et Malorum (“En los extremos del bien y del mal”), del filósofo romano Cicerón, de 45 aC. Más específicamente, se piensa que el pasaje proviene de las secciones 1.10.32 - 33 de su texto, con la parte más notable extraída a continuación:</p>
 <div class="sourceCode"><div class="highlight"><pre><span></span><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;hello&quot;</span><span class="p">)</span>
 </pre></div>
 </div>
-<section id="pyout" class="level2" data-number="5.1">
-<h2 data-number="5.1"><span class="header-section-number">5.1</span> Pyout</h2>
+<section id="pyout" class="level2" data-number="6.1">
+<h2 data-number="6.1"><span class="header-section-number">6.1</span> Pyout</h2>
 <div class="sourceCode"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">IPython.display</span> <span class="kn">import</span> <span class="n">HTML</span>
 <span class="n">HTML</span><span class="p">(</span><span class="s2">&quot;&quot;&quot;</span>
 <span class="s2">&lt;script&gt;</span>
@@ -288,22 +318,22 @@ <h2 data-number="5.1"><span class="header-section-number">5.1</span> Pyout</h2>
 <span class="s2">&quot;&quot;&quot;</span><span class="p">)</span>
 </pre></div>
 </div>
-<section id="image" class="level3" data-number="5.1.1">
-<h3 data-number="5.1.1"><span class="header-section-number">5.1.1</span> Image</h3>
+<section id="image" class="level3" data-number="6.1.1">
+<h3 data-number="6.1.1"><span class="header-section-number">6.1.1</span> Image</h3>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Nunc luctus
 bibendum felis dictum sodales.</p>
 </section>
 </section>
 </section>
-<section id="lorem-ipsum-1" class="level1" data-number="6">
-<h1 data-number="6"><span class="header-section-number">6</span> Lorem ipsum</h1>
+<section id="lorem-ipsum-1" class="level1" data-number="7">
+<h1 data-number="7"><span class="header-section-number">7</span> Lorem ipsum</h1>
 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Nunc luctus
 bibendum felis dictum sodales.</p>
 <div class="sourceCode"><div class="highlight"><pre><span></span><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;hello&quot;</span><span class="p">)</span>
 </pre></div>
 </div>
-<section id="pyout-1" class="level2" data-number="6.1">
-<h2 data-number="6.1"><span class="header-section-number">6.1</span> Pyout</h2>
+<section id="pyout-1" class="level2" data-number="7.1">
+<h2 data-number="7.1"><span class="header-section-number">7.1</span> Pyout</h2>
 <div class="sourceCode"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">IPython.display</span> <span class="kn">import</span> <span class="n">HTML</span>
 <span class="n">HTML</span><span class="p">(</span><span class="s2">&quot;&quot;&quot;</span>
 <span class="s2">&lt;script&gt;</span>

diff --git a/example.pdf b/example.pdf
diff --git a/template/css/template.css b/template/css/template.css
@@ -472,7 +472,20 @@ figcaption{
 .columns2 img {
   width: 45%!important;
   margin-right: 1.3rem;
+}
+
+/* From original template */
+div.columns {
+  display: flex;
+  gap: min(4vw, 1.5em);
+}
 
+div.column {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-x: auto;
 }
 
 

diff --git a/template/filter.lua b/template/filter.lua
@@ -1,3 +1,14 @@
+function parse_size(size)
+  -- to parse width and height
+  size = string.gsub(size,"(%%)", "")
+  -- convert height XY% into 0.XY
+  size = tonumber(size)
+  if (size == nil) then
+    size = 100.0
+  end
+  return size / 100.0
+end
+
 if FORMAT:match 'latex' then
 
   function Span(el)
@@ -74,6 +85,30 @@ if FORMAT:match 'latex' then
     elseif el.classes[1] == "center" then
       beg_v = "\\begin{center}"
       end_v = "\\end{center}"
+    elseif el.classes[1] == 'column' then
+      -- FOR COLUMNS
+      -- https://superuser.com/questions/1682413/two-columns-pdf-from-markdown-with-pandoc-and-lua-script
+      local width = parse_size(el.attributes.width)
+      beg_v = pandoc.List:new{pandoc.RawBlock("latex", '\\begin{minipage}{'..width..'\\linewidth}\n\\setlength{\\parskip}{1.2em}')}
+      end_v = pandoc.List:new{pandoc.RawBlock("latex", "\\end{minipage}")}
+      return beg_v .. el.content .. end_v
+    elseif el.classes[1] == 'columns' then
+      -- FOR COLUMNS
+      -- https://superuser.com/questions/1682413/two-columns-pdf-from-markdown-with-pandoc-and-lua-script
+      -- merge two consecutives RawBlocks (\end... and \begin...)
+      -- to get rid of the extra blank line
+      local blocks = el.content
+      local rbtxt = ''
+
+      for i = #blocks-1, 1, -1 do
+        if i > 1 and blocks[i].tag == 'RawBlock' and blocks[i].text:match 'end' and blocks[i+1].tag == 'RawBlock' and blocks[i+1].text:match 'begin' then
+          -- added \hfill for the space between
+          rbtxt = blocks[i].text .."\\hfill".. blocks[i+1].text
+          blocks:remove(i+1)
+          blocks[i].text = rbtxt
+        end
+      end
+      return blocks
     elseif el.classes[1] == "mycode" then
       title = pandoc.utils.stringify(el.c[1])
       language = pandoc.utils.stringify(el.c[2].attr.classes)
@@ -86,10 +121,6 @@ if FORMAT:match 'latex' then
       code = el.c[2].text
       -- get mycode block's title
       return pandoc.RawBlock('latex', "\\begin{mycode}{"..title.."}{"..language.."}{\\"..size.."}\n"..code.."\n\\end{mycode}")
-    elseif el.classes[1] == "framed" then
-      table.insert(el.c[1].c[1].content, 1, pandoc.RawInline("latex", "\\frame{ "))
-      table.insert(el.c[1].c[1].content, pandoc.RawInline("latex", " }"))
-      return el
     end
 
     table.insert(el.content, 1, pandoc.RawInline("latex", beg_v))
@@ -116,27 +147,13 @@ if FORMAT:match 'latex' then
 
     -- height = el.attributes.height
     if (el.attributes.width) then
-      -- remove the percentage, because in LaTeX make problems
-      width = string.gsub(el.attributes.width,"(%%)", "")
-      -- convert width XY% into 0.XY
-      width = tonumber(width)
-      if (width == nil) then
-        width = 100.0
-      end
-      width = width / 100.0 -- "0."..width
+      width = parse_size(el.attributes.width)
       table.insert(options,string.format("width=%s\\linewidth",string.format("%f", width)))
     end
 
     -- height = el.attributes.height
     if (el.attributes.height) then
-      -- remove the percentage, because in LaTeX make problems
-      height = string.gsub(el.attributes.height,"(%%)", "")
-      -- convert height XY% into 0.XY
-      height = tonumber(height)
-      if (height == nil) then
-        height = 100.0
-      end
-      height = height / 100.0
+      height = parse_size(el.attributes.height)
       table.insert(options,string.format("height=%s\\linewidth",string.format("%f", height)))
     end
 
@@ -146,6 +163,7 @@ if FORMAT:match 'latex' then
       table.insert(options,framed)
     end
 
+    -- FIXME: remove in the future the floats
     local float = nil
     for _, v in ipairs(el.classes) do
       if v == "float-left" then