summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 89739d2)
raw | patch | inline | side by side (parent: 89739d2)
| author | elektrischerwalfisch <mail@elektrischerwalfisch.de> | |
| Thu, 10 Apr 2025 09:05:04 +0000 (11:05 +0200) | ||
| committer | elektrischerwalfisch <mail@elektrischerwalfisch.de> | |
| Thu, 10 Apr 2025 09:05:04 +0000 (11:05 +0200) |
index c929efc38209586b6efadc7d8c5e9fc5e64644de..f52d664aec91ccd995ff63af17ee6d7fa7832c22 100644 (file)
--- a/TODO.md
+++ b/TODO.md
-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 cd2ffdc5940c65b6e90ba7e3210747fe8541b36b..a3ef99f1b1cf583444393b00a7cd3767cc1c30e7 100644 (file)
--- a/pages-de/01-header.md
+++ b/pages-de/01-header.md
-{langmenu}
+{extras}
- [English](/en)
- [Deutsch](/de)
-{/langmenu}
+{/extras}
[flatMark](/de)
diff --git a/pages-en/01-header.md b/pages-en/01-header.md
index 60f1089d466cb7d6859e79d06dc4069f9a6a0431..c089756ff2a9687f977dbaa6d2eacaf3b383aca5 100644 (file)
--- a/pages-en/01-header.md
+++ b/pages-en/01-header.md
-{langmenu}
+{extras}
- [English](/en)
- [Deutsch](/de)
-{/langmenu}
+{/extras}
[flatMark](/de)
diff --git a/pages-en/examples.md b/pages-en/examples.md
index d83c42af990d23624d4cb3e135a5daab75a65245..08ecd956b35cd9bda693eea7ee15ac8cbf004a5b 100644 (file)
--- a/pages-en/examples.md
+++ b/pages-en/examples.md
**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}
**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>
-
-
-{/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}
-
-
{/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}
-
-
-
-{/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}
-
-
{/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}
-
-
-
-{columns-seperator}
-
-
-
-{/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}
-
-
{columns-seperator}
-
-
{/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}
{/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}
-
-{/img-rounded}
-{/columns}
diff --git a/pages-en/home.md b/pages-en/home.md
index 19a312557fcf3f853addf9fb962076091f124263..79b8c744f082f86847f46044ad3d5035fac77310 100644 (file)
--- a/pages-en/home.md
+++ b/pages-en/home.md
<!-- description: Description of homepage -->
<!-- robots: index, follow -->
-{bg-color}{columns 33-66}
+{background color-02}{columns 33-66}
{img-rounded}
{/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}
diff --git a/theme/css/style.css b/theme/css/style.css
index 6178ac574ae0abd746c9deda709a3a2fd821083f..1a86633013c4bd1913cd67754c62cba90a981e75 100644 (file)
--- a/theme/css/style.css
+++ b/theme/css/style.css
/* 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;}
* {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);}
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 bdf0a942921653509797a0e259c162a0158a0a67..c053082026e9b1910d414815c6dc28ee31e63e16 100644 (file)
--- a/theme/shortcodes.php
+++ b/theme/shortcodes.php
}, $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]);
// 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) {