From: elektrischerwalfisch <mail@elektrischerwalfisch.de>
Date: Fri, 4 Apr 2025 17:10:23 +0000 (+0200)
Subject: add code-shortcode and more examples
X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=211ea122828897677427625248851ad1c9fc7fdc;p=flatmark

add code-shortcode and more examples
---

diff --git a/TODO.md b/TODO.md
index bbd3824..a3c82c6 100644
--- 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 b37f5b3..d83c42a 100644
--- 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 1457f58..6178ac5 100644
--- 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 9bc5d71..bdf0a94 100644
--- 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;
     }