✨ feat: force LTR rendering for code blocks

- Add new config option `force_codeblock_ltr` (default: true) - Implement CSS to force LTR rendering of code blocks when enabled - Update documentation to include new option BREAKING CHANGE: Code blocks default to LTR. Set `force_codeblock_ltr = false` to keep previous behaviour.
welpo · Oct 17, 2024 · da5b228 · da5b228
1 parent 11e246a
commit da5b228
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 1 deletion.
diff --git a/config.toml b/config.toml
@@ -134,6 +134,11 @@ copy_button = true
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 add_src_to_code_block = false
 
+# Force left-to-right (LTR) direction for code blocks.
+# Set to false to allow code to follow the document's natural direction.
+# Can be set at page or section levels. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+force_codeblock_ltr = true
+
 # Show the author(s) of a page.
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 show_author = false

diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md
@@ -581,6 +581,14 @@ Establir `copy_button = true` afegirà un petit botó de copiar a la part superi
 
 Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url).
 
+### Forçar els blocs de codi d'esquerra a dreta
+
+| Pàgina | Secció | `config.toml` | Segueix jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
+|   ✅   |   ✅   |      ✅       |        ✅         |          ❌          |
+
+Configurar `force_codeblock_ltr = true` (per defecte) renderitza els blocs de codi d'esquerra a dreta, independentment de la direcció del text de la pàgina. Establir `false` permet que els blocs de codi segueixin la direcció del document. Útil per a llengües que s'escriuen de dreta a esquerra.
+
 ### Suport per a KaTeX
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md
@@ -581,6 +581,14 @@ Establecer `copy_button = true` añadirá un pequeño botón de copiar en la par
 
 Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url).
 
+### Forzar bloques de código de izquierda a derecha
+
+| Página | Sección | `config.toml` | Sigue jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:----------------:|:-------------------:|
+|   ✅   |   ✅    |      ✅       |        ✅        |         ❌         |
+
+Configurar `force_codeblock_ltr = true` (por defecto) renderiza los bloques de código de izquierda a derecha, independientemente de la dirección del texto de la página. Establecer a `false` permite que los bloques de código sigan la dirección del documento. Útil para idiomas que se escriben de derecha a izquierda.
+
 ### Soporte para KaTeX
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md
@@ -591,6 +591,14 @@ Setting `copy_button = true` will add a small copy button to the top right of co
 
 Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_block` shortcode](@/blog/shortcodes/index.md#show-source-or-path).
 
+### Force Code Blocks LTR
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
+
+Setting `force_codeblock_ltr = true` (default) renders code blocks left-to-right, regardless of the page text direction. Set to `false` to allow code blocks to follow the document's text direction. Useful for RTL languages.
+
 ### KaTeX Support
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss
@@ -1,3 +1,5 @@
+
+
 code {
     border-radius: 5px;
     background-color: var(--bg-1);
@@ -101,6 +103,13 @@ pre {
     }
 }
 
+// Forces LTR codeblock if `force_codeblock_ltr` is set to true.
+html[data-code-direction="ltr"] {
+    code, pre {
+        direction: ltr;
+    }
+}
+
 .copy-code {
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M217.002-67.694q-37.732 0-64.02-26.288-26.287-26.287-26.287-64.019V-707.69h77.999v549.689q0 4.615 3.846 8.462 3.846 3.846 8.462 3.846h451.689v77.999H217.002Zm175.999-175.999q-37.733 0-64.02-26.287T302.694-334v-463.383q0-37.732 26.287-64.02 26.287-26.287 64.02-26.287h365.383q37.732 0 64.019 26.287 26.288 26.288 26.288 64.02V-334q0 37.733-26.288 64.02-26.287 26.287-64.019 26.287H393.001Zm0-77.998h365.383q4.615 0 8.462-3.847 3.846-3.846 3.846-8.462v-463.383q0-4.616-3.846-8.462-3.847-3.846-8.462-3.846H393.001q-4.616 0-8.462 3.846-3.847 3.846-3.847 8.462V-334q0 4.616 3.847 8.462 3.846 3.847 8.462 3.847Zm-12.309 0v-488V-321.691Z'/%3E%3C/svg%3E");
     position: absolute;

diff --git a/templates/base.html b/templates/base.html
@@ -15,11 +15,18 @@
 {%- endif -%}
 {% set rtl_languages = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] %}
 
+{#- Necessary for the hierarchy macro -#}
+{%- if page -%}
+    {%- set current_page = page -%}
+{%- else -%}
+    {%- set current_page = ""-%}
+{%- endif -%}
 
 <!DOCTYPE html>
 <html lang="{{ lang }}" {% if config.extra.default_theme -%}
     data-theme="{{config.extra.default_theme}}"
-{%- endif -%}>
+{%- endif -%}{% if macros_settings::evaluate_setting_priority(setting="force_codeblock_ltr", page=current_page, default_global_value=true) == "true" -%}
+    data-code-direction="ltr"{% endif %}>
 
 {% include "partials/header.html" %}
 

diff --git a/templates/page.html b/templates/page.html
@@ -63,6 +63,7 @@
     {% set settings_to_test = [
         "footnote_backlinks",
         "add_src_to_code_block",
+        "force_codeblock_ltr",
         "copy_button",
         "katex",
         "quick_navigation_buttons",

diff --git a/theme.toml b/theme.toml
@@ -91,6 +91,11 @@ copy_button = true
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 add_src_to_code_block = false
 
+# Force left-to-right (LTR) direction for code blocks.
+# Set to false to allow code to follow the document's natural direction.
+# Can be set at page or section levels. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+force_codeblock_ltr = true
+
 # Show the author(s) of a page.
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 show_author = false