[feat] add text color to pdf generation

.github/workflows/generate-pdf.yml

@@ -16,9 +16,9 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Install Pandoc, Latex necessities, and pdftk
+      - name: Install Pandoc, Latex necessities, lua, and pdftk
         run: |
-          sudo apt-get install -y pandoc texlive texlive-latex-extra poppler-utils texlive-extra-utils pdftk
+          sudo apt-get install -y pandoc texlive texlive-latex-extra poppler-utils texlive-extra-utils lua5.3 pdftk
 
       - name: Install Python
         uses: actions/setup-python@v4
@@ -78,7 +78,7 @@ jobs:
           )
           for md_file in "${file_list[@]}"; do
             pdf_file_name="pdf_output/$(echo "$md_file" | sed 's/\//_/g' | sed 's/.md//g').pdf"
-            python3 pdf-generation/generate-pdf-edits.py "$md_file" | pandoc -V geometry:margin=1in -V colorlinks=true -V linkcolor=blue -V urlcolor=blue --pdf-engine=pdflatex -o "$pdf_file_name"
+            python3 pdf-generation/generate-pdf-edits.py "$md_file" | pandoc -V geometry:margin=1in -V colorlinks=true -V linkcolor=blue -V urlcolor=blue --lua-filter=pdf-generation/color-text-span.lua --pdf-engine=pdflatex -o "$pdf_file_name"
 
             if [ ! -f "$pdf_file_name" ]; then
               echo "Error: PDF file $pdf_file_name not created!" >&2

_sass/color_schemes/dark_wider.scss

@@ -106,16 +106,16 @@ a.skip-to-main:focus, a.skip-to-main:active {
   color: #f5f6fa !important;
 }
 
-span.blue {
-  color: #00D3EB;
+span[style*="color:blue"] {
+  color: #00D3EB !important;
 }
 
-span.red {
-  color: #FFB3B3;
+span[style*="color:red"] {
+  color: #FFB3B3 !important;
 }
 
-span.green {
-  color: #79DB00;
+span[style*="color:green"] {
+  color: #79DB00 !important;
 }
 
 body {

_sass/color_schemes/wider.scss

@@ -102,16 +102,16 @@ a.skip-to-main:focus, a.skip-to-main:active {
   color: #27262b !important;
 }
 
-span.blue {
-  color: blue;
+span[style*="color:blue"] {
+  color: blue !important;
 }
 
-span.red {
-  color: #AD0000;
+span[style*="color:red"] {
+  color: #AD0000 !important;
 }
 
-span.green {
-  color: #005200;
+span[style*="color:green"] {
+  color: #005200 !important;
 }
 
 body, .site-footer {

pdf-generation/color-text-span.lua

@@ -0,0 +1,39 @@
+-- https://stackoverflow.com/questions/62831191/using-span-for-font-color-in-pandoc-markdown-for-both-html-and-pdf
+-- https://bookdown.org/yihui/rmarkdown-cookbook/font-color.html
+-- https://ulriklyngs.com/post/2019/02/20/how-to-use-pandoc-filters-for-advanced-customisation-of-your-r-markdown-documents/
+
+function Span (el)
+    local style = el.attributes.style
+    if style and string.find(style, "color") then
+      stylestr = style
+      thecolor = string.match(stylestr, "color:%s*(%a+);?")
+
+      local color_mapping = {
+        blue = "blue",
+        red = "purple", 
+        green = "teal",
+      }
+
+      local latex_color = color_mapping[thecolor]
+
+      --print(thecolor)
+      if FORMAT:match 'latex' then
+        -- encapsulate in latex code
+        table.insert(
+          el.content, 1,
+          pandoc.RawInline('latex', '\\textcolor{'..latex_color..'}{')
+        )
+        table.insert(
+          el.content,
+          pandoc.RawInline('latex', '}')
+        )
+        -- returns only span content
+        return el.content
+      else
+        -- for other format return unchanged
+        return el
+      end
+    else
+      return el
+    end
+  end

web/cookies.md

@@ -5,6 +5,9 @@ nav_order: 4
 layout: page
 header-includes:
 - \pagenumbering{gobble}
+output:
+  pdf_document:
+    pandoc_args: ["--lua-filter=color-text-span.lua"]
 ---
 
 # 20. Cookies and Session Management
@@ -28,7 +31,7 @@ For security and functionality reasons, we don't want the browser to send every
 
 The browser sends a cookie to a given URL if the cookie's `Domain` attribute is a domain-suffix of the URL domain, and the cookie's `Path` attribute is a prefix of the URL path. In other words, the URL domain should end in the cookie's `Domain` attribute, and the URL path should begin with the cookie's `Path` attribute.
 
-For example, a cookie with <code>Domain=<span class="red">example.com</span></code> and <code>Path=<span class="green">/some/path</span></code> will be included on a request to <code>http://foo.<span class="red">example.com</span><span class="green">/some/path</span>/index.html</code>, because the URL domain ends in the cookie domain, and the URL path begins with the cookie path.
+For example, a cookie with <code>Domain=<span style="color:red">example.com</span></code> and <code>Path=<span style="color:green">/some/path</span></code> will be included on a request to <code>http://foo.<span style="color:red">example.com</span><span style="color:green">/some/path</span>/index.html</code>, because the URL domain ends in the cookie domain, and the URL path begins with the cookie path.
 
 Note that cookie policy uses a different set of rules than the same origin policy. This has caused problems in the past. {% comment %} Nick wrote: "has caused problems in the path." typo? -peyrin {% endcomment %}
 

web/intro.md

@@ -5,6 +5,9 @@ nav_order: 2
 layout: page
 header-includes:
 - \pagenumbering{gobble}
+output:
+  pdf_document:
+    pandoc_args: ["--lua-filter=color-text-span.lua"]
 ---
 
 # 18. Introduction to the Web
@@ -15,9 +18,9 @@ Every resource (webpage, image, PDF, etc.) on the web is identified by a URL (Un
 
 <p style="text-align: center">
   <code>
-    <span class="blue">http</span
-    >://<span class="green">www.example.com</span
-    ><span class="red">/index.html</span>
+    <span style="color:blue">http</span
+    >://<span style="color:green">www.example.com</span
+    ><span style="color:red">/index.html</span>
   </code>
 </p>
 
@@ -41,13 +44,13 @@ In summary, a URL with all elements present may look like this:
 
 <p style="text-align: center">
   <code>
-    <span class="blue">http://</span
-    ><span class="red">evanbot@</span
-    ><span class="blue">www.cs161.org</span
-    ><span class="red">:161</span
-    ><span class="blue">/whoami</span
-    ><span class="red">?k1=v1&amp;k2=v2</span
-    ><span class="blue">#anchor</span>
+    <span style="color:blue">http://</span
+    ><span style="color:red">evanbot@</span
+    ><span style="color:blue">www.cs161.org</span
+    ><span style="color:red">:161</span
+    ><span style="color:blue">/whoami</span
+    ><span style="color:red">?k1=v1&amp;k2=v2</span
+    ><span style="color:blue">#anchor</span>
   </code>
 </p>
 

web/sqli.md

@@ -5,6 +5,9 @@ nav_order: 1
 layout: page
 header-includes:
 - \pagenumbering{gobble}
+output:
+  pdf_document:
+    pandoc_args: ["--lua-filter=color-text-span.lua"]
 ---
 
 # 17. SQL Injection
@@ -13,7 +16,7 @@ header-includes:
 
 SQL injection is a special case of a more broad category of attacks called code injections.
 
-As an example, consider a calculator website that accepts user input and calls `eval` in Python in the server backend to perform the calculation. For example, if a user types <code class="red">2+3</code> into the website, the server will run <code>eval('<span class="red">2+3</span>')</code> and return the result to the user.
+As an example, consider a calculator website that accepts user input and calls `eval` in Python in the server backend to perform the calculation. For example, if a user types <code class="red">2+3</code> into the website, the server will run <code>eval('<span style="color:red">2+3</span>')</code> and return the result to the user.
 
 If the web server is not careful about checking user input, an attacker could provide a malicious input like
 
@@ -24,7 +27,7 @@ If the web server is not careful about checking user input, an attacker could pr
 When the web server plugs this into the `eval` function, the result looks like
 
 <p style="text-align: center">
-  <code>eval("<span class="red">2+3"); os.system("rm *.*</span>")</code>
+  <code>eval("<span style="color:red">2+3"); os.system("rm *.*</span>")</code>
 </p>
 
 If interpreted as code, this statement causes the web server to delete all its files!
@@ -47,7 +50,7 @@ A user can make an HTTP GET request for a course rating through a URL:
 
 <p style="text-align: center">
   <code>
-    http://www.berkeley.edu/evals?course=<span class="red"
+    http://www.berkeley.edu/evals?course=<span style="color:red"
     >cs61a</span>
   </code>
 </p>
@@ -56,7 +59,7 @@ To process this request, the server performs a SQL query to look up the rating c
 
 <p style="text-align: center">
   <code>
-    SELECT rating FROM evals WHERE course = '<span class="red"
+    SELECT rating FROM evals WHERE course = '<span style="color:red"
     >cs61a</span>'
   </code>
 </p>
@@ -73,7 +76,7 @@ When the web server plugs this into the SQL query, the resulting query looks lik
 
 <p style="text-align: center">
   <code>
-    SELECT rating FROM evals WHERE course = '<span class="red"
+    SELECT rating FROM evals WHERE course = '<span style="color:red"
     >garbage'; SELECT * FROM passwords WHERE username = 'admin</span>'
   </code>
 </p>
@@ -95,8 +98,8 @@ When the web server receives a login request, it creates a SQL query by plugging
 
 <p style="text-align: center">
   <code>
-    SELECT username FROM users WHERE username = '<span class="red"
-    >alice</span>' AND password = '<span class="red">password123</span>'
+    SELECT username FROM users WHERE username = '<span style="color:red"
+    >alice</span>' AND password = '<span style="color:red">password123</span>'
   </code>
 </p>
 
@@ -109,8 +112,8 @@ First, in the username field, we should add a dummy username and a quote to end
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red">alice'</span>' AND password =
-    '<span class="red">password123</span>'
+    '<span style="color:red">alice'</span>' AND password =
+    '<span style="color:red">password123</span>'
   </code>
 </p>
 
@@ -119,8 +122,8 @@ Next, we need to add some SQL syntax so that this query returns more than 0 rows
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red">alice' OR 1=1</span>' AND password =
-    '<span class="red">_____</span>'
+    '<span style="color:red">alice' OR 1=1</span>' AND password =
+    '<span style="color:red">_____</span>'
   </code>
 </p>
 
@@ -129,9 +132,9 @@ Next, we have to add some SQL so that the rest of the query doesn't throw a synt
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red"
+    '<span style="color:red"
       >alice' OR 1=1; SELECT username FROM users WHERE username = 'alice</span
-    >' AND password = '<span class="red">_____</span>'
+    >' AND password = '<span style="color:red">_____</span>'
   </code>
 </p>
 
@@ -140,9 +143,9 @@ The second query might not return anything, but the first query will return a no
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red"
+    '<span style="color:red"
       >alice' OR 1=1; SELECT username FROM users WHERE username = 'alice</span
-    >' AND password = '<span class="red">garbage</span>'
+    >' AND password = '<span style="color:red">garbage</span>'
   </code>
 </p>
 
@@ -166,9 +169,9 @@ In our previous example, we can instead start a comment to ignore parts of the q
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red">alice' OR 1=1--</span
+    '<span style="color:red">alice' OR 1=1--</span
     ><span style="opacity: 0.5"
-      >' AND password = '<span class="red">garbage</span>'</span
+      >' AND password = '<span style="color:red">garbage</span>'</span
     >
   </code>
 </p>
@@ -198,8 +201,8 @@ For example, in the previous exploit, if the server replaces all instances of th
 <p style="text-align: center">
   <code>
     SELECT username FROM users WHERE username =
-    '<span class="red">alice\' OR 1=1\-\-</span>' AND password =
-    '<span class="red">garbage</span>'
+    '<span style="color:red">alice\' OR 1=1\-\-</span>' AND password =
+    '<span style="color:red">garbage</span>'
   </code>
 </p>
 

web/xss.md

@@ -5,6 +5,9 @@ nav_order: 6
 layout: page
 header-includes:
 - \pagenumbering{gobble}
+output:
+  pdf_document:
+    pandoc_args: ["--lua-filter=color-text-span.lua"]
 ---
 
 # 22. Cross-Site Scripting (XSS)
@@ -36,15 +39,15 @@ In a reflected XSS attack, the attacker finds a vulnerable webpage where the ser
 A classic example of reflected XSS is a Google search. When you make an HTTP GET request for a Google search, such as `https://www.google.com/search?&q=cs161`, the returned webpage with search results will include something like
 
 <p style="text-align: center">
-  <code>You searched for: <span class="red">cs161</span></code>
+  <code>You searched for: <span style="color:red">cs161</span></code>
 </p>
 
 If Google does not properly check user input, an attacker could create a malicious URL `https://www.google.com/search?&q=<script>alert("XSS attack!")</script>`. When the victim loads this URL, Google will return
 
 <p style="text-align: center">
   <code>
     You searched for:
-    <span class="red"
+    <span style="color:red"
       >&lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;</span
     >
   </code>