Improved source code highlighting

Now the sourcecode is equal in pdf and Latex.
 - Changed the filter when creating html to use pygmentize for the code
 - Now the code can be in dark mode
 - In PDF the code looks like wit yukibook.cls

.gitignore

@@ -1,3 +1,4 @@
+input.tex
 *log
 *.aux
 *.listing

1.md

@@ -41,7 +41,7 @@ Another example for console:
 ::: mycode
 [Title 2]{.title}
 
-``` bash
+```console
 root@1b29e46c10ae:/var/www/html# php artisan make:model Post -crms
 ```
 :::

defaults.yaml

@@ -6,7 +6,9 @@ embed-resources: false
 top-level-division: chapter
 section-divs: true
 pdf-engine: lualatex
-pdf-engine-opt: '-shell-escape'
+pdf-engine-opt:
+  - '-shell-escape'
+  - '-output-directory=.'
 template: template/yuki.html
 filters:
   - template/filter.lua

template/css/pygments/friendly.css

@@ -0,0 +1,75 @@
+pre { line-height: 125%; }
+td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #ffffff; }
+.highlight .c { color: #60a0b0; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #007020; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #007020 } /* Comment.Preproc */
+.highlight .cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #007020 } /* Keyword.Pseudo */
+.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #902000 } /* Keyword.Type */
+.highlight .m { color: #40a070 } /* Literal.Number */
+.highlight .s { color: #4070a0 } /* Literal.String */
+.highlight .na { color: #4070a0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.highlight .no { color: #60add5 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #007020 } /* Name.Exception */
+.highlight .nf { color: #06287e } /* Name.Function */
+.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #bb60d5 } /* Name.Variable */
+.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #40a070 } /* Literal.Number.Bin */
+.highlight .mf { color: #40a070 } /* Literal.Number.Float */
+.highlight .mh { color: #40a070 } /* Literal.Number.Hex */
+.highlight .mi { color: #40a070 } /* Literal.Number.Integer */
+.highlight .mo { color: #40a070 } /* Literal.Number.Oct */
+.highlight .sa { color: #4070a0 } /* Literal.String.Affix */
+.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
+.highlight .sc { color: #4070a0 } /* Literal.String.Char */
+.highlight .dl { color: #4070a0 } /* Literal.String.Delimiter */
+.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
+.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
+.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #c65d09 } /* Literal.String.Other */
+.highlight .sr { color: #235388 } /* Literal.String.Regex */
+.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
+.highlight .ss { color: #517918 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #06287e } /* Name.Function.Magic */
+.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
+.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
+.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
+.highlight .vm { color: #bb60d5 } /* Name.Variable.Magic */
+.highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */

template/css/pygments/github-dark.css

@@ -0,0 +1,86 @@
+pre { line-height: 125%; }
+td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; }
+.dark .hll { background-color: #6e7681 }
+.dark { background: #212529; color: #e6edf3 }
+.dark .c { color: #8b949e; font-style: italic } /* Comment */
+.dark .err { color: #f85149 } /* Error */
+.dark .esc { color: #e6edf3 } /* Escape */
+.dark .g { color: #e6edf3 } /* Generic */
+.dark .k { color: #ff7b72 } /* Keyword */
+.dark .l { color: #a5d6ff } /* Literal */
+.dark .n { color: #e6edf3 } /* Name */
+.dark .o { color: #ff7b72; font-weight: bold } /* Operator */
+.dark .x { color: #e6edf3 } /* Other */
+.dark .p { color: #e6edf3 } /* Punctuation */
+.dark .ch { color: #8b949e; font-style: italic } /* Comment.Hashbang */
+.dark .cm { color: #8b949e; font-style: italic } /* Comment.Multiline */
+.dark .cp { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.dark .cpf { color: #8b949e; font-style: italic } /* Comment.PreprocFile */
+.dark .c1 { color: #8b949e; font-style: italic } /* Comment.Single */
+.dark .cs { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Special */
+.dark .gd { color: #ffa198; background-color: #490202 } /* Generic.Deleted */
+.dark .ge { color: #e6edf3; font-style: italic } /* Generic.Emph */
+.dark .ges { color: #e6edf3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.dark .gr { color: #ffa198 } /* Generic.Error */
+.dark .gh { color: #79c0ff; font-weight: bold } /* Generic.Heading */
+.dark .gi { color: #56d364; background-color: #0f5323 } /* Generic.Inserted */
+.dark .go { color: #8b949e } /* Generic.Output */
+.dark .gp { color: #8b949e } /* Generic.Prompt */
+.dark .gs { color: #e6edf3; font-weight: bold } /* Generic.Strong */
+.dark .gu { color: #79c0ff } /* Generic.Subheading */
+.dark .gt { color: #ff7b72 } /* Generic.Traceback */
+.dark .g-Underline { color: #e6edf3; text-decoration: underline } /* Generic.Underline */
+.dark .kc { color: #79c0ff } /* Keyword.Constant */
+.dark .kd { color: #ff7b72 } /* Keyword.Declaration */
+.dark .kn { color: #ff7b72 } /* Keyword.Namespace */
+.dark .kp { color: #79c0ff } /* Keyword.Pseudo */
+.dark .kr { color: #ff7b72 } /* Keyword.Reserved */
+.dark .kt { color: #ff7b72 } /* Keyword.Type */
+.dark .ld { color: #79c0ff } /* Literal.Date */
+.dark .m { color: #a5d6ff } /* Literal.Number */
+.dark .s { color: #a5d6ff } /* Literal.String */
+.dark .na { color: #e6edf3 } /* Name.Attribute */
+.dark .nb { color: #e6edf3 } /* Name.Builtin */
+.dark .nc { color: #f0883e; font-weight: bold } /* Name.Class */
+.dark .no { color: #79c0ff; font-weight: bold } /* Name.Constant */
+.dark .nd { color: #d2a8ff; font-weight: bold } /* Name.Decorator */
+.dark .ni { color: #ffa657 } /* Name.Entity */
+.dark .ne { color: #f0883e; font-weight: bold } /* Name.Exception */
+.dark .nf { color: #d2a8ff; font-weight: bold } /* Name.Function */
+.dark .nl { color: #79c0ff; font-weight: bold } /* Name.Label */
+.dark .nn { color: #ff7b72 } /* Name.Namespace */
+.dark .nx { color: #e6edf3 } /* Name.Other */
+.dark .py { color: #79c0ff } /* Name.Property */
+.dark .nt { color: #7ee787 } /* Name.Tag */
+.dark .nv { color: #79c0ff } /* Name.Variable */
+.dark .ow { color: #ff7b72; font-weight: bold } /* Operator.Word */
+.dark .pm { color: #e6edf3 } /* Punctuation.Marker */
+.dark .w { color: #6e7681 } /* Text.Whitespace */
+.dark .mb { color: #a5d6ff } /* Literal.Number.Bin */
+.dark .mf { color: #a5d6ff } /* Literal.Number.Float */
+.dark .mh { color: #a5d6ff } /* Literal.Number.Hex */
+.dark .mi { color: #a5d6ff } /* Literal.Number.Integer */
+.dark .mo { color: #a5d6ff } /* Literal.Number.Oct */
+.dark .sa { color: #79c0ff } /* Literal.String.Affix */
+.dark .sb { color: #a5d6ff } /* Literal.String.Backtick */
+.dark .sc { color: #a5d6ff } /* Literal.String.Char */
+.dark .dl { color: #79c0ff } /* Literal.String.Delimiter */
+.dark .sd { color: #a5d6ff } /* Literal.String.Doc */
+.dark .s2 { color: #a5d6ff } /* Literal.String.Double */
+.dark .se { color: #79c0ff } /* Literal.String.Escape */
+.dark .sh { color: #79c0ff } /* Literal.String.Heredoc */
+.dark .si { color: #a5d6ff } /* Literal.String.Interpol */
+.dark .sx { color: #a5d6ff } /* Literal.String.Other */
+.dark .sr { color: #79c0ff } /* Literal.String.Regex */
+.dark .s1 { color: #a5d6ff } /* Literal.String.Single */
+.dark .ss { color: #a5d6ff } /* Literal.String.Symbol */
+.dark .bp { color: #e6edf3 } /* Name.Builtin.Pseudo */
+.dark .fm { color: #d2a8ff; font-weight: bold } /* Name.Function.Magic */
+.dark .vc { color: #79c0ff } /* Name.Variable.Class */
+.dark .vg { color: #79c0ff } /* Name.Variable.Global */
+.dark .vi { color: #79c0ff } /* Name.Variable.Instance */
+.dark .vm { color: #79c0ff } /* Name.Variable.Magic */
+.dark .il { color: #a5d6ff } /* Literal.Number.Integer.Long */

template/filter.lua

@@ -1,13 +1,4 @@
 if FORMAT:match 'latex' then
-  title = ""
-
-  function Para(el)
-    if (el.c[1].t == "Span" and el.c[1].classes[1] == "title") then
-      -- get mycode block's title, and put in global variable
-      title = pandoc.utils.stringify(el.c[1])
-      return ""
-    end
-  end
 
   function Span(el)
     beg_v = ""
@@ -79,10 +70,11 @@ if FORMAT:match 'latex' then
       beg_v = "\\begin{exercisebox}"
       end_v = "\\end{exercisebox}"
     elseif el.classes[1] == "mycode" then
+      title = pandoc.utils.stringify(el.c[1])
+      language = pandoc.utils.stringify(el.c[2].attr.classes)
+      code = el.c[2].text
       -- get mycode block's title
-      beg_v = "\\begin{mycode}{"..title.."}"
-      title = ""
-      end_v = "\\end{mycode}"
+      return pandoc.RawBlock('latex', "\\begin{mycode}{"..title.."}{"..language.."}{}\n"..code.."\n\\end{mycode}")
     elseif el.classes[1] == "frame" 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", " }"))
@@ -145,4 +137,24 @@ if FORMAT:match 'html' then
       -- return full span element
       return el
   end
+
+  function CodeBlock(block)
+    lang = block.classes[1]
+    code = block.text
+    filename = "pygmentize.txt"
+
+    file = io.open(filename, "w")
+    file:write(code)
+    file:close()
+
+
+    cmd = string.format('pygmentize -l %s -f %s < %s', lang, 'html',filename)
+    local proceso = io.popen(cmd, "r") -- Abre el archivo en modo de lectura
+    local output = proceso:read('*a')
+    proceso:close()
+    os.remove(filename)
+
+    texto = '<div class="sourceCode">'..output..'</div>'
+    return pandoc.RawBlock('html',texto)
+  end
 end

template/js/dark_mode.js

@@ -13,17 +13,29 @@
 
     const getPreferredTheme = () => {
         if (storedTheme) {
-        return storedTheme
+            return storedTheme
         }
 
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     }
-    
+
     const setTheme = function (theme) {
+        var source_theme = theme
+        if (theme == 'light' || theme == 'auto'){
+            source_theme = 'highlight'
+        }
+
         if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.setAttribute('data-bs-theme', 'dark')
+            document.documentElement.setAttribute('data-bs-theme', 'dark')
+            source_theme = 'dark'
         } else {
-        document.documentElement.setAttribute('data-bs-theme', theme)
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+        //change code
+        for (const element of document.querySelectorAll('[class=sourceCode]')) {
+            element.firstElementChild.className = ''
+            element.firstElementChild.setAttribute('class',source_theme)
+            console.log(source_theme)
         }
     }
 
@@ -50,7 +62,7 @@
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
         if (storedTheme !== 'light' || storedTheme !== 'dark') {
-        setTheme(getPreferredTheme())
+            setTheme(getPreferredTheme())
         }
     })
 
@@ -60,10 +72,10 @@
         document.querySelectorAll('[data-bs-theme-value]')
         .forEach(toggle => {
             toggle.addEventListener('click', () => {
-            const theme = toggle.getAttribute('data-bs-theme-value')
-            localStorage.setItem('theme', theme)
-            setTheme(theme)
-            showActiveTheme(theme)
+                const theme = toggle.getAttribute('data-bs-theme-value')
+                localStorage.setItem('theme', theme)
+                setTheme(theme)
+                showActiveTheme(theme)
             })
         })
     })

template/yuki.html

@@ -22,16 +22,15 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-  <style>
-    /* $styles.html()$  */
-  </style>
   <style>
     :root {
       --templatecolor: #$maincolor$;
     }
   </style>
   <link href="template/css/dark_mode.css" rel="stylesheet">
   <link href="template/css/template.css" rel="stylesheet">
+  <link href="template/css/pygments/friendly.css" rel="stylesheet">
+  <link href="template/css/pygments/github-dark.css" rel="stylesheet">
 
 $for(css)$
   <link rel="stylesheet" href="$css$">
@@ -151,9 +150,9 @@ <h2 class="text-center">$abstract-title$</h2>
             $include-before$
           $endfor$
 
-          <div id="book">
-            $body$
-          </div>
+<div id="book">
+$body$
+</div>
 
           $for(include-after)$
             $include-after$

template/yuki.tex

@@ -834,9 +834,9 @@
 
 \RequirePackage{fontawesome5}
 \RequirePackage{tcolorbox}
-\tcbuselibrary{raster,fitting,many,listings,breakable,skins}
+\tcbuselibrary{raster,fitting,many,minted,breakable,skins}
 \usetikzlibrary{decorations.pathmorphing}
-% \usemintedstyle{friendly}
+\usemintedstyle{friendly}
 % \newtcolorbox{infobox}{colback=cyan!5!white,arc=0pt,outer arc=0pt,colframe=cyan!60!black}
 \newenvironment{custombox}[4]{
   \begin{tcolorbox}[
@@ -884,13 +884,12 @@
   \end{custombox}
 }
 
-\newenvironment{mycode}[1]{
-  \begin{tcolorbox}[
-    title=\faTerminal \hspace{10pt}\textbf{#1},
-      breakable=true,enhanced jigsaw
-  ]
-}{
-  \end{tcolorbox}
+\newtcblisting[auto counter,number within=section, list inside=mycommands]
+  {mycode}[3]{
+    listing only,adjusted title={\faTerminal \hspace{10pt}#1}, listing engine=minted,minted language=#2,
+    breakable=true,enhanced jigsaw,
+    minted options={fontsize=#3},colback=white,
+    list entry={\protect\numberline{\thetcbcounter}#1}
 }
 
 \DeclareTotalTCBox{\inlineconsole}{ v }