From: elektrischerwalfisch <mail@elektrischerwalfisch.de>
Date: Thu, 10 Apr 2025 09:05:04 +0000 (+0200)
Subject: optimise shortcodes
X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=00a6478033b89e2cbdcffc905b429bb7071d96de;p=flatmark

optimise shortcodes
---

diff --git a/TODO.md b/TODO.md
index c929efc..f52d664 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,8 +1,15 @@
-x fix codeblock for img-rounded on example page
-x columns responsive
-- rename shortcode langmenu to extras (to use it for other header-extras (phonenumber etc.))
+- optimize text on examples page
 - simplify toggle-button js
 - links and buttons (shortcode) styling
-- add to readme from allmanritter-page
-- research about web-ftp, add paragraph "flatmark as cms" to readme
-- more text, contact page, slick-slider-page as reference?
\ No newline at end of file
+- readme: add from allmanritter-page
+- readme: add info about shortcodes
+- readme: add paragraph about basic and multilang-configuration
+- readme: add paragraph "flatmark as cms" to readme
+- more text, contact page, slick-slider-page as reference?
+
+x rename shortcode langmenu to extras (to use it for other header-extras (phonenumber etc.))
+x fix codeblock for img-rounded on example page
+x columns responsive
+
+Tinyfilemanager
+- code-highlighting for flatmark-shortcodes
\ No newline at end of file
diff --git a/pages-de/01-header.md b/pages-de/01-header.md
index cd2ffdc..a3ef99f 100644
--- a/pages-de/01-header.md
+++ b/pages-de/01-header.md
@@ -1,7 +1,7 @@
-{langmenu}
+{extras}
 - [English](/en)
 - [Deutsch](/de)
-{/langmenu}
+{/extras}
 
 ![Logo](/files/logo.gif)
 [flatMark](/de)
diff --git a/pages-en/01-header.md b/pages-en/01-header.md
index 60f1089..c089756 100644
--- a/pages-en/01-header.md
+++ b/pages-en/01-header.md
@@ -1,7 +1,7 @@
-{langmenu}
+{extras}
 - [English](/en)
 - [Deutsch](/de)
-{/langmenu}
+{/extras}
 
 ![Logo](/files/logo.gif)
 [flatMark](/de)
diff --git a/pages-en/examples.md b/pages-en/examples.md
index d83c42a..08ecd95 100644
--- a/pages-en/examples.md
+++ b/pages-en/examples.md
@@ -6,10 +6,16 @@
 
 **Code:**
 
-{code}---  
-**bold text**
+{code} 
 ## headline 2
 ### headline 3
+**bold text** 
+
+- List item one
+- List item two
+- List item three
+
+---
 [Linktext](http://www.domain.de)  
 {/code}
 
@@ -17,10 +23,15 @@
 
 **Output:**
 
----
-**bold text**
 ## headline 2
 ### headline 3
+**bold text**
+
+- List item one
+- List item two
+- List item three  
+
+---
 [Linktext](http://www.domain.de)  
 
 {/columns}  
@@ -33,156 +44,99 @@ Find the full syntax here: [www.markdownguide.org/basic-syntax](https://www.mark
 
 ## Shortcodes
 
----  
-**Code:**
-{code}{columns 50-50}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+These shortcodes are available in the default flatMark-theme:
 
+{code}
+{columns}
+    Content of first column
 {columns-seperator}
+    Content of second column
+{/columns}
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-{/columns}{/code}
+{background}
+    Content with backgrond-color
+{/background}
 
-**Output:**
-{columns 50-50}
+{img-rounded}
+    Picture with rounded border
+{/img-rounded}
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+{extras}
+    Extra content in 01-header.md (e. g. language-switch, phone, e-mail etc.)
+{/extras}
 
-{columns-seperator}
+{year}
+    Output of the current year (Can be used for copyright in 02-footer.md)
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+{/code}
 
-{/columns}  
- <br>
+### Additional values
+The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled:
+{code}
+{columns 50-50}
+{columns 33-66}
+{columns 66-33}
+{columns 33-33-33}
 
----
-**Code:**
-{code}{columns 33-66}
+{background color-01}
+{background color-02}
+{/code}  
+<br>  
 
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
+### Shortcode-Examples
 
+{columns 50-50}
+**columns 50-50** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 {columns-seperator}
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+{/columns}  
+ <br>
 
-![Pic](/files/example-pic-03.jpg)
-
-{/columns}{/code}
-
-**Output:**
 {columns 33-66}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-
+**columns 33-66** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 {columns-seperator}
-
 ![Pic](/files/example-pic-03.jpg)
-
 {/columns}
  <br>
 
----
-**Code:**
-{code}{columns 66-33}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-
-{columns-seperator}
-
-![Pic](/files/example-pic-02.jpg)
-
-{/columns}{/code}
-
-**Output:**
 {columns 66-33}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+**columns 66-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
-
 {columns-seperator}
-
 ![Pic](/files/example-pic-02.jpg)
-
 {/columns}
  <br>
 
----
-**Code:**
-{code}{columns 33-33-33}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 
-
-{columns-seperator}
-
-![Pic](/files/example-pic-01.jpg)
-
-{columns-seperator}
-
-![Pic](/files/example-pic-01.jpg)
-
-{/columns}{/code}
-
-**Output:**
 {columns 33-33-33}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 
-
+**columns 33-33-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. 
 {columns-seperator}
-
 ![Pic](/files/example-pic-01.jpg)
-
 {columns-seperator}
-
 ![Pic](/files/example-pic-01.jpg)
-
 {/columns}
  <br>
 
----
-**Code:**  
-{code}{bg-color}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
-
-{/bg-color}{/code}
-
-**Output:**  
-{bg-color}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
-
-{/bg-color}
- <br>
-
----
-**Code:**  
-{code}{columns 66-33}
-
-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
-
-{columns-seperator}
-
+{columns 33-66}
 {img-rounded}
 ![Pic](/files/example-pic-01.jpg)
 {/img-rounded}
-
-{/columns}{/code}
-
-**Output:**  
-{columns 66-33}
-
+{columns-seperator}
+**img-rounded** inside **columns 33-66** 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
+{/columns}
+<br>
 
-{columns-seperator}
+{background color-01}
+**background color-01** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
+{/background}
+ <br>
+
+{background color-02}
+**background color-02** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
+{/background}
 
-{img-rounded}
-![Pic](/files/example-pic-01.jpg)
-{/img-rounded}
 
-{/columns}
 
 
 
diff --git a/pages-en/home.md b/pages-en/home.md
index 19a3125..79b8c74 100644
--- a/pages-en/home.md
+++ b/pages-en/home.md
@@ -2,14 +2,14 @@
 <!-- description: Description of homepage -->
 <!-- robots: index, follow -->
 
-{bg-color}{columns 33-66}
+{background color-02}{columns 33-66}
 {img-rounded}
 ![Pic](/files/example-pic-01.jpg)
 {/img-rounded}
 {columns-seperator}
 # flatMark
 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-{/bg-color}{/columns}
+{/background}{/columns}
 
 {columns 33-66}
 ![Pic](/files/example-pic-02.jpg)
diff --git a/theme/css/style.css b/theme/css/style.css
index 6178ac5..1a86633 100644
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -91,17 +91,16 @@
 
 
 /* VARIABLES */
-:root {  --content-width01: 900px;}
+:root {  --content-width: 900px;}
+:root {  --website-background: #424242;}
 
 :root {  --colorblack: #000000;}
 :root {  --colordark: #666666;}
 :root {  --colorlight: #FFFFFF;}
-:root {  --color-gray-01: #424242;}
-:root {  --color-gray-02: #E6E6E6;}
 
 :root {  --color-01: #DBA901;} 
 :root {  --color-02: #DF3A01;}
-:root {  --color-03: #999999;} 
+:root {  --color-gray-01: #E6E6E6;}
 
 :root {  --space-below-00: 5px;} 
 :root {  --space-below-01: 15px;} 
@@ -122,16 +121,16 @@
 * {margin: 0;padding: 0;box-sizing: border-box;}
 header, footer, section, article, nav {display: block;}
 
-body {background: var(--color-gray-01);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: var(--lineheight-00);}
+body {background: var(--website-background);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: var(--lineheight-00);}
 
-#wrapper {max-width: var(--content-width01);margin: 0 auto;padding: var(--space-below-02) var(--side-space-01);}
+#wrapper {max-width: var(--content-width);margin: 0 auto;padding: var(--space-below-02) var(--side-space-01);}
 header, main {background: var(--colorlight);}
 
 h1 {font-size: var(--fontsize-xxl); font-weight: 800;color: var(--colordark);margin-bottom: var(--space-below-01);}
-h2 {font-size: var(--fontsize-l); font-weight: 800;color: var(--color-01);}
-h3 {font-size: var(--fontsize-m); font-weight: 700;}
+h2 {font-size: var(--fontsize-xl); font-weight: 800;color: var(--color-01);}
+h3 {font-size: var(--fontsize-l); font-weight: 700;}
 
-h2, p, ul, ol {margin-bottom: var(--space-below-01);}
+h2, h3, p, ul, ol {margin-bottom: var(--space-below-01);}
 
 a {color: var(--color-01); text-decoration: underline;}
 a:hover {text-decoration: none;outline: 0;}
@@ -163,10 +162,7 @@ header #main-nav ul a:is(:hover, :focus, .active) {background: var(--colorlight)
 main {padding: 0 var(--side-space-02) var(--space-below-01) var(--side-space-02);margin-bottom: var(--space-below-00);}
 
 main > h1 {background: var(--color-02);color: var(--colorlight);padding: var(--space-below-00) var(--side-space-01);text-align: right;}
-main ul {list-style: disc;padding-left: 40px;}
-main li {margin-bottom: var(--space-below-01);}
-main a::before {content: '[';}
-main a::after {content: ']';}
+main ul {list-style: disc;padding-left: var(--side-space-01);}
 main table {width: 100%;}
 main table th,
 main table td {text-align: left;border: none;min-width: 100px;vertical-align: top;padding-bottom: var(--space-below-01);}
@@ -175,20 +171,25 @@ main table tr > td:first-child {font-weight: 600;}
 main .columns {display: grid;grid-template-rows: auto;gap: var(--gap-01);box-sizing: border-box;}
 main .columns p:empty {display: none;}
 main .columns,
-main .columns.c-50-50 {grid-template-columns: 1fr 1fr;}
-main .columns.c-33-66 {grid-template-columns: 1fr 2fr;}
-main .columns.c-66-33 {grid-template-columns: 2fr 1fr;}
-main .columns.c-33-33-33 {grid-template-columns: 1fr 1fr 1fr;}
+main .columns.cols-50-50 {grid-template-columns: 1fr 1fr;}
+main .columns.cols-33-66 {grid-template-columns: 1fr 2fr;}
+main .columns.cols-66-33 {grid-template-columns: 2fr 1fr;}
+main .columns.cols-33-33-33 {grid-template-columns: 1fr 1fr 1fr;}
 
 main .bg-color {padding: var(--space-below-01) var(--side-space-01);background:var(--color-02);margin-bottom: var(--space-below-01);}
 main .bg-color * {color:var(--colorlight);}
 
+main .background {padding: var(--space-below-01) var(--side-space-01);background:var(--color-gray-01);margin-bottom: var(--space-below-01);}
+main .background.bg-color-01 {background:var(--color-01);}
+main .background.bg-color-02 {background:var(--color-02);}
+main .background:is(.bg-color-01, .bg-color-02) * {color:var(--colorlight);}
+
 main .img-rounded {aspect-ratio: 1/1;border-radius: 50%;border: var(--space-below-01) solid var(--colorlight);overflow: hidden;margin-top: calc(0px - var(--space-below-02));}
 main .img-rounded img {object-fit: cover;width: 100%;height: 100%;display: block;}
 
 main code {
     font-family: courier 'Courier New', Courier, monospace;font-size: var(--fontsize-m);
-    background: var(--color-gray-02);color: var(--colordark);}
+    background: var(--color-gray-01);color: var(--colordark);}
 main div.code code {display: block;white-space: pre-wrap;margin-bottom: var(--space-below-01);
     padding: var(--space-below-01) var(--space-below-01);border-radius: 10px;}
 
diff --git a/theme/shortcodes.php b/theme/shortcodes.php
index bdf0a94..c053082 100644
--- a/theme/shortcodes.php
+++ b/theme/shortcodes.php
@@ -16,7 +16,7 @@
         }, $markdown);
 
     // Shortcode: language menu
-        $pattern = '/\{langmenu\}(.*?)\{\/langmenu\}/s';
+        $pattern = '/\{extras\}(.*?)\{\/extras\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {
             // Process Markdown inside the language menu
             $langLinks = $Parsedown->text($matches[1]);
@@ -32,35 +32,47 @@
     // Shortcode: columns with optional classes
         $pattern = '/\{columns(.*?)\}(.*?)\{\/columns\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {
-            // Capture the class (if any) directly after {columns}
-            $attributes = trim($matches[1]); // Capture the class (e.g., 50-50)
+            // Capture the additional class (if any exists) directly after {columns}
+            $colsAttributes = trim($matches[1]);    // e.g., "50-50" from {background 50-50}
             $colsContent = $matches[2]; // Capture the content inside {columns} ... {/columns}
             
             // Add prefix to the class
-            $prefix = 'c-'; // Define the prefix here
-            $class = !empty($attributes) ? $prefix . $attributes : ''; // Prefix added to class
+            $colsPrefix = 'cols-'; // Define the prefix here
+            $colsClass = !empty($colsAttributes) ? $colsPrefix . $colsAttributes : ''; // Prefix added to class (e.g., cols-50-50)
 
             // Split the columns by {columns-seperator}
             $cols = preg_split('/\{columns-seperator\}/', $colsContent);
 
-            // Wrap each column in <div class="col">
+            // Wrap each column in <div class="column">
             $colHtml = '';
             foreach ($cols as $col) {
                 $colHtml .= '<div class="column">' . $Parsedown->text(trim($col)) . '</div>';
             }
 
-            // Wrap everything in a <div class="cols"> and add class if available
-            return '<div class="columns ' . $class . '">' . $colHtml . '</div>';
+            // Wrap everything in a div and add class if available
+            return '<div class="columns ' . $colsClass . '">' . $colHtml . '</div>';
         }, $markdown);
 
-    // Shortcode: bg color
-        $pattern = '/\{bg-color\}(.*?)\{\/bg-color\}/s';
+    // Shortcode: background with optional class
+        $pattern = '/\{background(.*?)\}(.*?)\{\/background\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {
-            // Process Markdown
-            $bgColor = $Parsedown->text($matches[1]);
-            return '<div class="bg-color">' . $bgColor . '</div>';
+            // Capture the additional class (if any exists) directly after {background}
+            $bgAttributes = trim($matches[1]);  // e.g., "color-01" from {background color-01}
+            $bgContent = $matches[2];   // Capture the content inside {background} ... {/background}
+
+            // Add prefix to the class
+            $bgPrefix = 'bg-'; // Define the prefix here
+            $bgClass = !empty($bgAttributes) ? $bgPrefix . $bgAttributes : '';  // Prefix added to class (e.g., bg-color-01)
+
+            // Convert the inner Markdown content
+            $bgHtml = $Parsedown->text($bgContent);
+
+            // Wrap everything in a div and add class if available
+            return '<div class="background ' . $bgClass . '">' . $bgHtml . '</div>';
         }, $markdown);
 
+
+
     // Shortcode: img rounded
         $pattern = '/\{img-rounded\}(.*?)\{\/img-rounded\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {