Disable code line numbers by default; add page-level opt-in

assets/css/main.css

@@ -275,8 +275,8 @@ html {
 /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
 /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
 /* LineHighlight */ .chroma .hl { background-color:var(--color-blue-200) }
-/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:var(--color-gray-600) }
-/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:var(--color-gray-600) }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:var(--color-gray-500) }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:var(--color-gray-500) }
 /* Line */ .chroma .line { display:flex; }
 /* Keyword */ .chroma .k { color:var(--color-blue-800) }
 /* KeywordConstant */ .chroma .kc { color:var(--color-blue-800) }
@@ -366,11 +366,14 @@ html {
 /* fix highlight with line number */
 .highlight .chroma .lntable {
   margin: 1.7142857em 0;
-  padding: 0.8571429em 1.1428571em;
   border-radius: 0.75rem;
   overflow: hidden;
 }
 
+.highlight .lntable tr .lntd:first-child > pre {
+  padding-left: 0.8571429em;
+}
+
 .highlight .chroma .lntable pre {
   margin: 0;
   padding: 0.8571429em 0;
@@ -386,10 +389,18 @@ html {
   display: flex;
 }
 
+.highlight .lntable tr .lntd:first-child {
+  border-right: 1px solid #fff;
+}
+
 .highlight .lntable tr .lntd:last-child {
   flex-grow: 1;
 }
 
+.highlight .lntable tr .lntd:last-child > pre {
+  padding-left: 0.8em;
+}
+
 /* Tailwind Typography (prose) custom colors - Posit brand */
 .prose {
   --tw-prose-body: var(--color-gray-500) !important;

content/blog/CLAUDE.md

@@ -62,6 +62,7 @@ Freeform. Avoid duplicating `software` or `topics` values.
 | `nohero` | Boolean, hides the hero image |
 | `hidesubscription` | Boolean, hides the subscription CTA |
 | `photo.url` / `photo.author` | Stock photo attribution |
+| `code-line-numbers` | Boolean, turns on line-number gutters for every code block on the page |
 
 ## Legacy Blog Listing
 

content/blog/_authoring-guide.md

@@ -238,6 +238,16 @@ format:
 
 Or per-chunk with `#| code-fold: true`.
 
+#### Code line numbers
+
+Off by default. Set `code-line-numbers: true` at the top level of frontmatter to turn line numbers on for every code block on the page:
+
+```yaml
+code-line-numbers: true
+```
+
+Quarto's per-cell (`#| code-line-numbers: true`) and per-block (`{code-line-numbers="true"}`) variants are stripped during the GFM render, so page-level is currently the only form that works.
+
 #### Videos
 
 ```markdown
@@ -301,6 +311,14 @@ To find a post's permalink, check its `date` and `slug` (or folder name) in fron
 
 ### `.md` posts
 
+#### Code line numbers
+
+Off by default. Set `code-line-numbers: true` at the top level of frontmatter to turn line numbers on for every code block on the page:
+
+```yaml
+code-line-numbers: true
+```
+
 #### Videos
 
 ```markdown

content/blog/great-tables/latex-output-tables/index.md

@@ -1,23 +1,26 @@
 ---
 title: 'Great Tables: Generating LaTeX Output for PDF'
-description: "Create publication-ready PDF tables by exporting Great Tables to LaTeX."
+description: Create publication-ready PDF tables by exporting Great Tables to LaTeX.
 auto-description: true
 people:
   - Rich Iannone
-date: '2024-11-13T00:00:00.000Z'
+date: '2024-11-13'
 format:
-  html:
-    code-fold: yes
+  hugo-md:
+    code-fold: true
     code-summary: Show the Code
 ported_from: great_tables
 source: great_tables
 port_status: in-progress
-software: ["great-tables"]
-languages: ["Python"]
+software:
+  - great-tables
+languages:
+  - Python
 topics:
   - Visualization
 tags:
   - Great Tables
+code-line-numbers: true
 ---
 
 
@@ -38,6 +41,9 @@ In this post, we will go over the following:
 
 We can use the `GT.as_latex()` method to generate LaTeX table code. This code includes important structural pieces like titles, spanners, and value formatting. For example, here's a simple table output as LaTeX code:
 
+<details class="code-fold">
+<summary>Show the Code</summary>
+
 ``` python
 from great_tables import GT
 from great_tables.data import gtcars
@@ -78,6 +84,8 @@ gt_tbl = (
 print(gt_tbl.as_latex())
 ```
 
+</details>
+
 ``` latex
 \begin{table}
 \caption*{
@@ -215,56 +223,56 @@ If you'd like to experiment with Great Tables' LaTeX rendering, you can get the
 
 The `as_latex()` method is still experimental and has some limitations. The following table lists the work epics that have been done and those planned:
 
-<div id="frhhzxfsek" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
+<div id="hscpiduwgn" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');
-#frhhzxfsek table {
+#hscpiduwgn table {
           font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
         }
 
-#frhhzxfsek thead, tbody, tfoot, tr, td, th { border-style: none; }
+#hscpiduwgn thead, tbody, tfoot, tr, td, th { border-style: none; }
  tr { background-color: transparent; }
-#frhhzxfsek p { margin: 0; padding: 0; }
- #frhhzxfsek .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: 450px; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
- #frhhzxfsek .gt_caption { padding-top: 4px; padding-bottom: 4px; }
- #frhhzxfsek .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
- #frhhzxfsek .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
- #frhhzxfsek .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
- #frhhzxfsek .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
- #frhhzxfsek .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
- #frhhzxfsek .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
- #frhhzxfsek .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
- #frhhzxfsek .gt_column_spanner_outer:first-child { padding-left: 0; }
- #frhhzxfsek .gt_column_spanner_outer:last-child { padding-right: 0; }
- #frhhzxfsek .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
- #frhhzxfsek .gt_spanner_row { border-bottom-style: hidden; }
- #frhhzxfsek .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
- #frhhzxfsek .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
- #frhhzxfsek .gt_from_md> :first-child { margin-top: 0; }
- #frhhzxfsek .gt_from_md> :last-child { margin-bottom: 0; }
- #frhhzxfsek .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
- #frhhzxfsek .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
- #frhhzxfsek .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
- #frhhzxfsek .gt_row_group_first td { border-top-width: 2px; }
- #frhhzxfsek .gt_row_group_first th { border-top-width: 2px; }
- #frhhzxfsek .gt_striped { color: #333333; background-color: #F4F4F4; }
- #frhhzxfsek .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
- #frhhzxfsek .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
- #frhhzxfsek .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
- #frhhzxfsek .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
- #frhhzxfsek .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
- #frhhzxfsek .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
- #frhhzxfsek .gt_left { text-align: left; }
- #frhhzxfsek .gt_center { text-align: center; }
- #frhhzxfsek .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
- #frhhzxfsek .gt_font_normal { font-weight: normal; }
- #frhhzxfsek .gt_font_bold { font-weight: bold; }
- #frhhzxfsek .gt_font_italic { font-style: italic; }
- #frhhzxfsek .gt_super { font-size: 65%; }
- #frhhzxfsek .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
- #frhhzxfsek .gt_asterisk { font-size: 100%; vertical-align: 0; }
+#hscpiduwgn p { margin: 0; padding: 0; }
+ #hscpiduwgn .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: 450px; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
+ #hscpiduwgn .gt_caption { padding-top: 4px; padding-bottom: 4px; }
+ #hscpiduwgn .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
+ #hscpiduwgn .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
+ #hscpiduwgn .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
+ #hscpiduwgn .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
+ #hscpiduwgn .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
+ #hscpiduwgn .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
+ #hscpiduwgn .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
+ #hscpiduwgn .gt_column_spanner_outer:first-child { padding-left: 0; }
+ #hscpiduwgn .gt_column_spanner_outer:last-child { padding-right: 0; }
+ #hscpiduwgn .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
+ #hscpiduwgn .gt_spanner_row { border-bottom-style: hidden; }
+ #hscpiduwgn .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
+ #hscpiduwgn .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
+ #hscpiduwgn .gt_from_md> :first-child { margin-top: 0; }
+ #hscpiduwgn .gt_from_md> :last-child { margin-bottom: 0; }
+ #hscpiduwgn .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
+ #hscpiduwgn .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
+ #hscpiduwgn .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
+ #hscpiduwgn .gt_row_group_first td { border-top-width: 2px; }
+ #hscpiduwgn .gt_row_group_first th { border-top-width: 2px; }
+ #hscpiduwgn .gt_striped { color: #333333; background-color: #F4F4F4; }
+ #hscpiduwgn .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
+ #hscpiduwgn .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
+ #hscpiduwgn .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
+ #hscpiduwgn .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
+ #hscpiduwgn .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
+ #hscpiduwgn .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
+ #hscpiduwgn .gt_left { text-align: left; }
+ #hscpiduwgn .gt_center { text-align: center; }
+ #hscpiduwgn .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
+ #hscpiduwgn .gt_font_normal { font-weight: normal; }
+ #hscpiduwgn .gt_font_bold { font-weight: bold; }
+ #hscpiduwgn .gt_font_italic { font-style: italic; }
+ #hscpiduwgn .gt_super { font-size: 65%; }
+ #hscpiduwgn .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
+ #hscpiduwgn .gt_asterisk { font-size: 100%; vertical-align: 0; }
 
 </style>
 

content/blog/great-tables/latex-output-tables/index.qmd

@@ -6,8 +6,8 @@ people:
   - Rich Iannone
 date: '2024-11-13'
 format:
-  html:
-    code-fold: yes
+  hugo-md:
+    code-fold: true
     code-summary: Show the Code
 ported_from: great_tables
 source: great_tables
@@ -18,6 +18,7 @@ topics:
   - Visualization
 tags:
   - Great Tables
+code-line-numbers: true
 ---
 
 We've been doing quite a bit of work on getting **Great Tables** to produce LaTeX table code and `v0.14.0` introduces the `as_latex()` method to make this possible. For those publishing workflows involving LaTeX documents, it's useful to have a reproducible solution for generating data tables as native LaTeX tables.