add code-shortcode and more examples

diff --git a/TODO.md b/TODO.md
index bbd38240d8cdb4cf802e8420331503088392aa44..a3c82c607d06b02667a1eb14580c18622fe43c74 100644 (file)
--- a/TODO.md
+++ b/TODO.md
@@ -1,4 +1,5 @@
-- fix codeblock for img-rounded on example page
-- columns responsive
+x fix codeblock for img-rounded on example page
+x columns responsive
 - add to readme from allmanritter-page
-- research about web-ftp, add paragraph "flatmark as cms" to readme
\ No newline at end of file
+- 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

diff --git a/pages-en/examples.md b/pages-en/examples.md
index b37f5b3a15fb615cffd23eb50426c600734626ee..d83c42af990d23624d4cb3e135a5daab75a65245 100644 (file)
--- a/pages-en/examples.md
+++ b/pages-en/examples.md
@@ -1,52 +1,190 @@
 # Examples
 
+## Markdown Basics
+
+{columns 50-50}
+
+**Code:**
+
+{code}---  
+**bold text**
+## headline 2
+### headline 3
+[Linktext](http://www.domain.de)  
+{/code}
+
+{columns-seperator}
+
+**Output:**
+
+---
+**bold text**
+## headline 2
+### headline 3
+[Linktext](http://www.domain.de)  
+
+{/columns}  
+
+For a simple line-break just add two empty spaces after the last word in the line.  
+For a second empty line add `<br>` 
+
+Find the full syntax here: [www.markdownguide.org/basic-syntax](https://www.markdownguide.org/basic-syntax/)  
+<br>
+
 ## 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.
+
+{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}{/code}
+
+**Output:**
 {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.
+
+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}
 
+{/columns}  
+ <br>
+
+---
+**Code:**
+{code}{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}{/code}
+
+**Output:**
 {columns 33-66}
-`{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. 
+
+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}
-`{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. 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 33-33-33}
-`{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}
 
-{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, 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, 
+{/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-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, 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, 
+
+![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}
-`{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, 
+
+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>
 
-`{bg-color}` 
+---
+**Code:**  
+{code}{columns 66-33}
 
-`{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.  
+
+{columns-seperator}
 
 {img-rounded}
 ![Pic](/files/example-pic-01.jpg)
 {/img-rounded}
 
+{/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.  
+
+{columns-seperator}
+
+{img-rounded}
+![Pic](/files/example-pic-01.jpg)
+{/img-rounded}
+
+{/columns}
+
+
+
+
 

diff --git a/theme/css/style.css b/theme/css/style.css
index 1457f580fa53fa2c40966250d42202a90b51d6db..6178ac574ae0abd746c9deda709a3a2fd821083f 100644 (file)
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -97,6 +97,7 @@
 :root {  --colordark: #666666;}
 :root {  --colorlight: #FFFFFF;}
 :root {  --color-gray-01: #424242;}
+:root {  --color-gray-02: #E6E6E6;}
 
 :root {  --color-01: #DBA901;} 
 :root {  --color-02: #DF3A01;}
@@ -185,13 +186,18 @@ main .bg-color * {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);}
+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;}
+
 footer {display: flex;justify-content: space-between;}
 footer * {margin-bottom: 0;color: var(--colorlight);font-weight: 600;}
 footer ul {display: flex;gap: var(--gap-01);}
 footer a {text-decoration: none;}
 footer a:is(:hover, :focus) {text-decoration: underline;}
 
-code {background: var(--color-01);padding: 3px;color: var(--colorlight);font-style: italic;font-weight: 600;}
 
 @media screen and (max-width: 781px) {
 

diff --git a/theme/shortcodes.php b/theme/shortcodes.php
index 9bc5d7190914dffa80a3a3513067c48b6687f8ff..bdf0a942921653509797a0e259c162a0158a0a67 100644 (file)
--- a/theme/shortcodes.php
+++ b/theme/shortcodes.php
@@ -5,6 +5,16 @@
     // Initialize Parsedown
         $Parsedown = new Parsedown();
 
+    // Shortcode: code
+        $codeBlocks = [];
+        $markdown = preg_replace_callback('/\{code\}(.*?)\{\/code\}/s', function ($matches) use (&$codeBlocks) {
+            // Generate a unique placeholder
+            $placeholder = '[[[CODEBLOCK_' . count($codeBlocks) . ']]]';
+            // Store the raw code block content
+            $codeBlocks[$placeholder] = '<div class="code"><code>' . htmlspecialchars($matches[1]) . '</code></div>';
+            return $placeholder;
+        }, $markdown);
+
     // Shortcode: language menu
         $pattern = '/\{langmenu\}(.*?)\{\/langmenu\}/s';
         $markdown = preg_replace_callback($pattern, function ($matches) use ($Parsedown) {
@@ -59,6 +69,12 @@
             return '<div class="img-rounded">' . $imgRounded . '</div>';
         }, $markdown);
 
+
+    // Shortcode: code - Restore code blocks (so no shortcode inside was processed)
+        foreach ($codeBlocks as $placeholder => $codeBlock) {
+            $markdown = str_replace($placeholder, $codeBlock, $markdown);
+        }
+
         return $markdown;
     }