Don't globally override table style, use shortcode

content/posts/json-vs-databases.md

@@ -44,6 +44,7 @@ current one, to avoid data repetition. This would be an example of the data tabl
 
 Table of students:
 
+{{< table >}}
 | Student ID | Date of birth | Name           | Permanent residence address | Field of study       |
 |------------|---------------|----------------|-----------------------------|----------------------|
 | 0          | 1999-02-22    | John Doe       | Leander, Texas(TX), 78641   | Software Engineering |
@@ -51,9 +52,11 @@ Table of students:
 | 2          | 2000-11-14    | Samantha Jones | Dayton, Kentucky(KY), 41074 | Graphics Design      |
 | 3          | 1998-04-12    | Michael Carter | Macomb, Michigan(MI), 48044 | Software Engineering |
 | ...        | ...           | ...            | ...                         | ...                  |
+{{< /table >}}
 
 Student Grades:
 
+{{< table >}}
 | Student | Subject           | Grade | Year |
 |---------|-------------------|-------|------|
 | 0       | Mathematics       | B     | 2020 |
@@ -63,6 +66,7 @@ Student Grades:
 | 2       | Web Design        | A     | 2021 |
 | 2       | Web Design        | B     | 2020 |
 | ...     | ...               | ...   | ...  |
+{{< /table >}}
 
 Here we can see that the *Student Grades* table doesn't have a standalone unique primary key, like the Students table
 has, but rather it has a composite primary key, in this case, it's made of 3 columns: *Student*, *Subject* and *Year*.

content/posts/typing-variance-of-generics.md

@@ -153,6 +153,7 @@ of the keys and second is the type of the values: `dict[str, int]` would be a di
 
 Here's a list of some definable generic types that are currently present in python 3.9:
 
+{{< table >}}
 | Type              | Description                                         |
 |-------------------|-----------------------------------------------------|
 | list[str]         | List of `str` objects                               |
@@ -162,6 +163,7 @@ Here's a list of some definable generic types that are currently present in pyth
 | Iterable[int]     | Iterable object containing ints                     |
 | Sequence[bool]    | Sequence of booleans (immutable)                    |
 | Mapping[str, int] | Mapping from `str` keys to `int` values (immutable) |
+{{< /table >}}
 
 
 In python, we can even make up our own generics with the help of `typing.Generic`:

layouts/shortcodes/table.html

@@ -0,0 +1,5 @@
+{{ $htmlTable := .Inner | markdownify }}
+
+<div class="markdown-table">
+    {{ $htmlTable | safeHTML }}
+</div>

static/src/scss/_main.scss

@@ -52,14 +52,6 @@ ul ul, ol ol {
   text-indent: 2em;
 }
 
-table td {
-  vertical-align: middle;
-}
-
-.table-dark {
-  color: $body-color;
-}
-
 .content {
   h1, h2, h3, h4, h5, h6 {
     margin-top: $headings-margin-bottom * 2.2;
@@ -86,14 +78,6 @@ table td {
     border-left: $spacer * 0.2 solid $light;
     padding-left: $spacer * 1.2;
   }
-
-  table {
-    @extend .table, .table-dark, .table-striped;
-    margin: 0 auto;
-    margin-bottom: $paragraph-margin-bottom;
-    width: 66%;
-    text-align: center;
-  }
 }
 
 img {
@@ -104,3 +88,18 @@ img {
   width: 100%;
   height: 35vh;
 }
+
+.markdown-table {
+    table {
+        @extend .table, .table-dark, .table-striped;
+        margin: 0 auto;
+        color: $body-color;
+        margin-bottom: 0;
+        width: 66%;
+        text-align: center;
+
+        td {
+            vertical-align: middle;
+        }
+    }
+}