<?php
	$type = 'post';
	$published = false;
	$date = '2026-03-03';
	$title = 'Demo';
	$description = 'A small demonstration of text formatting options in HTML that can be achieved using the buttons in the toolbar and the so-called „snippets“.';
	$image = '';
	$cats = '';
	$tags = '';
	$listed = false;
	$pinned = false;
	$front = false;
	$noindex = true;
	$nofollow = false;
	$noarchive = true;
	include 'lib/default-header.php';
?>

<p><b>A small demonstration of text formatting options in HTML that can be achieved using the buttons in the toolbar and the so-called "snippets".</b></p>

<details class="toc textbox noprint" _open>
	<summary><b>Table of contents</b></summary>
</details>

<p><i>Tip: It's best to open this article in a text editor so you can see the source code!</i></p>

<style>
<!--
	h3[id]::before {
		content: "— ";
	}
	h3[id]::after {
		content: " —";
	}
-->
</style>

<h2 id="Textformatierung</">Text formatting</h2>

<p>Here is a small demonstration of text formatting options in HTML that can be achieved with the buttons in the toolbar at the top (buttons <b>P</b>, <b>H2</b>, <b>H3</b>, etc.) and the so-called "snippets" from the "<b>Insert...</b>" menu. To do this, simply select the text you want to format and click the desired button or select the desired snippet.</p>

<p>In addition, you can of course use all the other formatting options that HTML has to offer by writing the desired HTML tags directly into the source text.</p>

<p>To quickly remove formatting, simply select the text and click the <b>x</b> button. With each click on the <b>x</b> button, another format is removed from the outside to the inside or from left to right.</p>

<p>In addition, the standard keyboard shortcuts also work (at least under Windows), such as <b>Ctrl</b>+<b>Z</b> to undo changes, <b>Ctrl</b>+<b>Y</b> to restore changes that have been accidentally undone, and of course <b>Ctrl</b>+<b>C</b>, <b>Ctrl</b>+<b>X</b> and <b>Ctrl</b>+<b>V</b> to copy, cut and paste text via the clipboard.</p>

<p>Basically, the text to be formatted must be selected beforehand - whether with the mouse or the keyboard:</p>

<ul>
	<li>Dragging while holding down the left mouse button selects text character by character.</li>
	<li>Dragging while holding down the left mouse button after double-clicking selects text word by word.</li>
	<li>Double-clicking on a word selects the whole word.</li>
	<li>Triple-clicking in a paragraph selects the whole paragraph.</li>
	<li>Left/right/up/down arrow keys while holding down the Shift key selects text character by character or line by line.</li>
	<li>Left/right arrow keys while holding down the Shift and Ctrl keys at the same time selects text word by word.</li>
</ul>

<p>Here is a demonstration of the formatting options:</p>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<p>A normal paragraph with text in <b>bold</b>, <i>italic</i>, <u>underlined</u>, highlighted with a <mark>highlighter</mark>, with a <span style="background-color: #D0F0F0; padding: 0.2em; margin: -0.2em;">background color</span> or <span style="color: #00C000;">colored</span>.</p>

<h2 id="Snippets">Snippets</h2>

<p>Now to the demonstration of the snippets from the "<b>Insert...</b>" menu. To better understand how it works, the text to be selected is given first and then the end result after inserting the snippet.</p>

<h3 id="section-single-image">Single image</h3>

<p>This section contains snippets relating to a single image.</p>

<h4 id="image">plain</h4>

<p>Inserts an image into the article. First, insert the image URL via the media library. If an image description is also specified, it will appear below the image.</p>

<p><i>Source text:</i></p>

media/green-article-image.jpg
Image description

<p>The image URL and the image description text are each on a separate line here.</p>

<p><i>Result</i> after selecting these two lines and applying the snippet:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<p>Alternatively, the image URL and image description text can also be on the same line. They are then separated by |:</p>

<p><i>Source text:</i></p>

media/green-article-image.jpg|Image description

<p>The <i>result</i> after highlighting and selecting the snippet is the same:</p>

<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<p>This also applies to all the following snippets, so it will not be mentioned again below.</p>

<p>By default, the image viewer is activated for inserted images, indicated by the "+" symbol in the bottom right corner of the image. Clicking on the image opens it in the image viewer. If you don't want the image viewer to be activated, simply remove or rename the "viewer" class, for example to "_viewer":</p> 

<div><figure class="_viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<h4 id="image-thinframe">with thin frame</h4>

<p>Inserts an image into the article and draws a thin, light gray border around the image.</p>

<p><i>Source text:</i></p>

media/default-favicon.png
Image description

<p><i>Result:</i></p>

<div><figure class="thinframe viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>

<h4 id="image-thumbnail">with preview image</h4>

<p>Displays a preview image in the article; clicking on it opens the full-resolution image in an image viewer. Two image URLs are provided for this purpose, a preview image and a full-size image:</p>

<p><i>Source text:</i></p>

media/dark-favicon.png
media/dark-article-image.jpg
Click to enlarge

<p><i>Result:</i></p>

<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="media/dark-article-image.jpg" alt="" /><figcaption>Click to enlarge</figcaption></figure></div>

<h4 id="image-link">with link</h4>

<p>Displays an image with a link. Clicking the image opens the link in a new browser tab. The link can be, for example, another image, an article, or a website. The image URL, the link itself, and optionally an image description are specified for the snippet:</p>

<p><i>Source text:</i></p>

media/default-favicon.png
/
To the homepage

<p><i>Result:</i></p>

<div><figure><a href="/" target="_blank"><img src="media/default-favicon.png" /></a><figcaption>To the homepage</figcaption></figure></div>

<h4 id="image-table">as table</h4>

<p>Inserts an image as an HTML table. This is intended to protect sensitive information — such as contact details in the legal notice — from misuse. To do this, first enter the information into the editor, take a screenshot, and crop the image to the required size using an image editing program. Then, upload it to the media library, insert the image's file path into the editor, and apply the snippet. The image should not be too large (max. 300 x 150 pixels), as the browser would otherwise take too long to display the graphic.</p>

<p><i>Source text:</i></p>

media/dd.png

<p><i>Result:</i></p>

<?php include_once "snippets/image-table.php"; PrintImageTable('media/dd.png', '#FFFFFF', '#000000', 'var(--ContentFgColor)'); ?>

<p>In the example above, a strictly black-and-white graphic was used (black text on a white background). To match the image to the website's color scheme, the following three parameters were added to the PrintImageTable PHP function call after inserting the snippet: '#FFFFFF' = the image color to be rendered transparent (in this case, the white background); '#000000' = the image color to be replaced (in this case, the black text); and 'var(--ContentFgColor)' = the replacement color for the text (in this case, the article content's text color).</p>

<p>Instead of the file path, you can also specify the image data using Base64 encoding; this has the advantage of ensuring that no image file containing sensitive information remains on the web server where it could potentially be accessed. To do this, open a new editor window, insert the image's file path, and apply the "Base64-encode" snippet described below. The Base64 code will then appear in the preview window on the right; simply copy it to the clipboard using the "Copy" button and paste it into the first parameter of the PrintImageTable PHP function, replacing the file path. You can then delete the image from the media library.</p>

<p>Background: If contact details appear as plain text on a webpage, they can easily be found and harvested by search engines and bots. While embedding them as an image offers slightly better protection, bots can still locate the image file and extract the text using OCR. Furthermore, under German law (GDPR), contact information in the legal notice must remain visible even if image loading is disabled in the browser. This is where the snippet comes in: it involves no image file that could be found or saved, and the image remains visible even when image loading is turned off.</p>

<p>However, even this method cannot offer 100% security against the automated extraction of protected information, as bots could still render the page and extract the data using OCR. To make this more difficult, the information to be protected can additionaly be placed within a protected paragraph that only becomes visible if the page is accessed via an internal link. You can use the "Paragraph &gt; Protect" snippet for this purpose. For this to work, the page must be linked using a protected link (in the editor via "[Open] &gt; Select Article &gt; Link (protected) &gt; [Insert]").</p>

<h4 id="image-to-base64">Base64-encode</h4>

<p>This snippet generates a Base64 string from image data; this string can be used, for example, in place of a file path within an image link (e.g., &lt;img src="data:image/png;base64,<span style="color: #0000FF;"><i>Base64 string</i></span>"&gt;) or in the "Single image &gt; as table" snippet mentioned previously. It is suitable for small images such as screenshots of contact information that should not be publicly accessible.</p>

<p>This snippet is not intended for use within an article itself; rather, it serves as a utility tool. To use it, it is best to open the editor in a new browser tab.</p>

<p><i>Source text:</i></p>

media/dd.png

<p><i>Result:</i></p>

<p>If everything worked correctly, the image will appear in the preview window on the right, with a "Copy" button and the Base64 code displayed below it. Clicking the button copies the code to your clipboard, allowing you to paste it into the appropriate location in your article. Afterward, you can close the browser tab and delete the image file.</p>

<h3 id="section-multiple-images">Multiple images</h3>

<p>Here you will find snippets that apply to multiple images. The images must already have been formatted with one of the snippets from the "Single image" section.</p>

<h4 id="image-carousel">in a “carousel”</h4>

<p>The images are displayed in a "carousel". You can "flip" through the images by clicking the buttons or by swiping your finger.</p>

<p>For this, the images are first inserted from the media manager into the editor:</p>

<p><i>Source text:</i></p>

media/warm-article-image.jpg
media/default-article-image.jpg
media/green-article-image.jpg
media/dark-article-image.jpg

<p>Then, an image snippet is applied to each individual image (as demonstrated above). Finally, all images are selected and the "Image Carousel" snippet is chosen.</p>

<p><i>Result:</i></p>

<div class="image-carousel middle viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="image-grid">arranged in a grid</h4>

<p>This arranges the images in a grid of square preview images ("thumbnails"):</p>

<div class="image-grid cover viewer"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>The behavior can be influenced by specifying the following CSS variables:</p>

<ul>
	<li><b>--Size</b>: Maximum size of the thumbnails.</li>
	<li><b>--Gap</b>: Spacing between the thumbnails.</li>
	<li><b>--Radius</b>: Corner radius of the thumbnails.</li>
</ul>

<p>Here's an example with smaller thumbnails (max. 100px), smaller spacing, and no corner radius:</p>

<div class="image-grid cover viewer" style="--Size: 100px; --Gap: 1px; --Radius: 0;"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<p>By removing or renaming the "cover" class, the thumbnails can be displayed in their entirety, with the "free" areas then filled with a background color:</p>

<div class="image-grid _cover viewer" style="--Size: 100px; --Gap: 4px; --Radius: 0;"> <!-- Fill image square: cover / CSS variables: --Size, --Gap, --Radius -->
	<div><figure class="viewer"><img src="media/widget-example-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/warm-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-header-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/cool-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-article-image.jpg" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h4 id="columns">in columns side-by-side</h4>

<p>This allows you to arrange multiple images side by side. On narrow displays, they are shown one below the other.</p>

<p><i>Example with 2 images, aligned at the top:</i></p>

<div class="columns top viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<p><i>Example with 3 images, centered:</i></p>

<div class="columns middle viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<p><i>Example with 4 images, aligned at the bottom:</i></p>

<div class="columns bottom viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-article-image.jpg" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
	<div><figure class="viewer"><img src="media/default-favicon.png" data-src="" alt="" /><figcaption>Image description</figcaption></figure></div>
</div>

<h4 id="gallery">centered side-by-side</h4>

<p>This snippet arranges as many images side-by-side, centered, as there is available horizontal space. The images are displayed in their original size, but (as with all images) their width is limited to that of the article page.</p>

<div class="gallery top viewer"> <!-- Vertical alignment: top|middle|bottom -->
	<div><figure class="viewer"><img src="media/warm-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/green-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
	<div><figure class="viewer"><img src="media/dark-favicon.png" data-src="" alt="" /><figcaption></figcaption></figure></div>
</div>

<h3 id="section-links">Links</h3>

<p>Here are various types of links to other articles, websites, or other destinations grouped together.</p>

<h4 id="link">Internal link</h4>

<p>Internal links open in the currrent browser tab and are suitable for linking to other articles. For the snippet, you first specify link text, then the URL or filename of the article, which can also be inserted via the file manager:</p>

<p><i>Source text:</i></p>

Welcome!
about

<p><i>Result:</i></p>

<p><a href="about">Welcome!</a></p>

<p>Instead of the two-line notation above, the single-line notation with | as a separator between the link text and the URL also works here:</p>

<p><i>Source text:</i></p>

<p>Welcome|about to my blog!</p>

<p><i>Result:</i></p>

<p><a href="about" title="">Welcome</a> to my blog!</p>

<p>(This also applies to the following examples.)</p>

<h4 id="link-extern">External link</h4>

<p>External links open in a new browser tab and are suitable, for example, for linking to pages on other websites:</p>

<p><i>Source text:</i></p>

<p>My blog | https://example.com/</p>

<p><i>Result:</i></p>

<p><a href="https://example.com/" target="_blank" rel="noopener" title="">My blog</a></p>

<h4 id="button-link">Internal button link</h4>

<p>An internal link as a button.</p>

<p><i>Source text:</i></p>

Welcome! | about

<p><i>Result:</i></p>

<p class="center"><a href="about" class="button-link">Welcome!</a></p>

<h4 id="button-link-extern">External button link</h4>

<p>An external link as a button.</p>

<p><i>Source text:</i></p>

My blog | https://example.com/

<p><i>Result:</i></p>

<p class="center"><a href="https://example.com/" target="_blank" rel="noopener" class="button-link">My blog</a></p>

<h4 id="article-card">Article card internal</h4>

<p>Links to internal articles are displayed as "cards".</p>

<p>The source text consists of the filenames of existing articles, inserted, for example, via the file manager. After applying the snippet, an alternative (shortened) description can optionally be specified.</p>

<p><i>Source text:</i></p>

intro
help

<p><i>Result:</i></p>

<div class="websites noprint">
	<?php include_once "snippets/article-card.php"; ArticleCard('intro', ''); ?>
	<?php include_once "snippets/article-card.php"; ArticleCard('help', 'Another description text...'); ?>
</div>

<h4 id="website-card">Website card external</h4>

<p>Links to external websites are displayed as a "card".</p>

<p>The source text consists of 4 lines with the following content:</p>

<p>Title
<br>Filename (inserted via file manager, without the .php extension)
<br>Image link
<br>Description text</p>

<p><i>Source text:</i></p>

Blog4u
https://www.stefanbion.de/ein-blog-fuer-dich
https://www.stefanbion.de/blog4u/media/my-blog.jpg
A nice little blogging system for you!

<p><i>Result:</i></p>

<!--
	Snippet "Website card" - The source text consists of 4 lines with the following content:

	Title
	Filename (inserted via file manager, without the .php extension)
	Image link
	Description text
-->

<div class="websites noprint">

	<div class="website">
		<a href="https://www.stefanbion.de/ein-blog-fuer-dich" target="_blank" rel="noopener" title="Blog4u">
			<img src="https://www.stefanbion.de/media/blog4u/my-blog.jpg">
			<div>
				<p class="website-title">Blog4u</p>
				<p class="website-description">A nice little blogging system for you!</p>
				<p class="center"><span class="button-link" ><?php echo GetString('VisitNow');?></span></p>
			</div>
		</a>
	</div>

	<!-- Insert further websites here (without the outer div) -->
</div>

<h4 id="tooltip">Tooltip</h4>

<p>Inserts a tooltip link into the text. When the mouse pointer is hovered over it, the text appears in a tooltip.</p>

<p><i>Source text:</i></p>

Individual words can be provided with a tooltip|A tooltip is a short explanatory text&#10;that is displayed when the mouse&#10;pointer hovers over it. Line breaks&#10;are created using &amp;#10;..

<p><i>Result:</i></p>

<p>Individual words can be provided with a <span class="tooltip" title="A tooltip is a short explanatory text&#10;that is displayed when the mouse&#10;pointer hovers over it. Line breaks&#10;are created using &amp;#10;.">tooltip</span>.

<h3 id="section-popups">Popups</h3>

<p>The snippets grouped here insert a popup link. This is a link that does not immediately open the specified web address when clicked; instead, it first displays a small info window with two buttons. The link only opens after the "Open Link" button is clicked. Clicking the "Close" button or clicking outside the popup closes the window without opening the link. One variation is a popup without a link, which displays only an informational message and the "Close" button.</p>

<p>A link becomes a popup link by assigning it the CSS class "popup":</p>

<pre class="textbox">
&lt;a class=”<b>popup</b>” href=”<b>link address</b>” title=”<b>text to be displayed</b>”&gt;link text&lt;/a&gt;
</pre>

<p>The text to be displayed in the popup is specified in the link's `title` attribute. Since HTML tags are not permitted here, the text can be formatted using a system similar to the <a href="https://en.wikipedia.org/wiki/BBCode" target="_blank" rel="noopener" title="">BBCode</a> familiar from forums:</p>

<ul>
	<li>Text styles: [b]<b>bold</b>[/b], [i]<i>italics</i>[/i], [s]<s>strikethrough</s>[/s], [u]<u>underlined</u>[/u]</li>
	<li>[br]Text on a new line</li>
	<li>[p]Text in a new paragraph, left-aligned</li>
	<li>[right]Text in a new paragraph, right-aligned</li>
	<li>[center]Text in a new paragraph, centered</li>
	<li>Link: [url=https://www.example.com/]Link text[/url]</li>
	<li>Image: [img]media/image.jpg[/img]</li>
	<li>Image with size specification: [img 50%]image/bild.jpg[/img]
	<br>(The value refers to the width; any standard CSS unit is valid, e.g., 100px, 1em, etc.)</li>
	<li>HTML content from an invisible DIV with ID: [id]ID[/id]</li>
</ul>

<p>In addition, the pop-up indicates whether the link points to an external site or an internal article, and which web server the link leads to. If the `href` attribute specifies a link to a Bible passage on www.bibleserver.com, the info text (ideally a Bible quote) is displayed in italics and enclosed in quotation marks, with the Bible reference and the Bible translation used in the link shown below it.</p>

<p>In addition to the content of the `title` attribute, arbitrary HTML content can also be displayed in the popup if it is specified between &lt;template&gt; and &lt;/template&gt;:</p>

<pre class="textbox">
&lt;a class=”<b>popup</b>” href=”<b>link address</b>” title=”<b>text to be displayed</b>”&gt;link text&lt;template&gt;<b>HTML content</b>&lt;/template&gt;&lt;/a&gt;
</pre>

<p>The content between &lt;template&gt; and &lt;/template&gt; is always displayed before the content of the `title` attribute.</p>

<p>The following snippets for inserting popups are available:</p>

<h4 id="popup-link">Internal popup link</h4>

<p>This snippet inserts a popup link to an internal article. Three pieces of information are required: Link text, Link URL, and the popup text to be displayed.</p>

<p><i>Source text:</i></p>

Help
help
[img]media/green-header-image.jpg[/img][center][b]Help[/b][p]Here you’ll find everything worth knowing about [i]Blog4u[/i] — and much more.

<p><i>Result:</i></p>

<a class="popup" href="help" title="[img]media/green-header-image.jpg[/img][center][b]Help[/b][p]Here you’ll find everything worth knowing about [i]Blog4u[/i] — and much more.">Help</a>

<h4 id="popup-link-extern">External popup link</h4>

<p>This snippet inserts a popup link to an external website. External links open in a new browser tab. Three pieces of information are required: Link text, Link URL, and the popup text to be displayed.</p>

<p><i>Source text:</i></p>

Blog4u
https://www.stefanbion.de/ein-blog-fuer-dich
[center][b]A blog for you?[/b][p][img]https://www.stefanbion.de/media/blog4u/my-blog.jpg[/img][p]Do you find WordPress with all its features and detailed user management quite nice, but it’s actually „overkill“ for you? Then download my little blog software and install it on your own web space!

<p><i>Result:</i></p>

<a class="popup" href="https://www.stefanbion.de/ein-blog-fuer-dich" target="_blank" rel="noopener" title="[center][b]A blog for you?[/b][p][img]https://www.stefanbion.de/media/blog4u/my-blog.jpg[/img][p]Do you find WordPress with all its features and detailed user management quite nice, but it’s actually „overkill“ for you? Then download my little blog software and install it on your own web space!">Blog4u</a>

<p>Here is an example with a Bible quote and a link to the ERF BibleServer:</p>

<p><i>Source text:</i></p>

John 3,16
https://www.bibleserver.com/NIV/John3%3A16
For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. (John 3,16)

<p><i>Result:</i></p>

<a class="popup" href="https://www.bibleserver.com/NIV/John3%3A16" target="_blank" rel="noopener" title="For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. (John 3,16)">John 3,16</a>

<p>Note: If a Bible reference appears at the very end of the Bible quote - either in parentheses or separated from the quote by "|" or " &ndash; " or " &mdash; " - then that reference is displayed in the pop-up below the quote (as shown in the example).</p>

<h4 id="popup">Popup without link</h4>

<p>This snippet inserts a simple popup without a link, containing only the info text and a close button. It is suitable for displaying brief notices or explanations that should not appear directly in the main text (as an alternative to footnotes or tooltips). Technically, it is simply a link without an `href` attribute. Two pieces of information are required: the link text and the popup text.</p>

<p><i>Source text:</i></p>

Leaf
[center][b]What kind of leaf is this?[/b][center][img 40%]media/green-favicon.png[/img][p]It is a four-leaf clover, which is very rare in nature (clover leaves usually have three leaflets). Since finding one requires a great deal of luck, it is considered a symbol of good fortune in folklore - though, of course, that is superstitious nonsense.

<p><i>Result:</i></p>

<a class="popup" title="[center][b]What kind of leaf is this?[/b][center][img 40%]media/green-favicon.png[/img][p]It is a four-leaf clover, which is very rare in nature (clover leaves usually have three leaflets). Since finding one requires a great deal of luck, it is considered a symbol of good fortune in folklore - though, of course, that is superstitious nonsense.">Leaf</a>

<h4 id="popup-id">Popup without link (ID)</h4>

<p>As before, but the popup displays arbitrary HTML content contained within an invisible DIV block referenced by its ID. The content of the DIV block can thus be reused in multiple popups. (Note: Naturally, the ID specification within the `title` attribute can also be used for popup links.) Two pieces of information are required: the link text and the ID of the DIV block.</p>

<p><i>Source text:</i></p>

Popup with ID
popup-content

<p>And here is the DIV block containing the content to be displayed in the popup (visible only in the source code):</p>

<p>(Start of DIV block)</p>

<div id="popup-content" style="display: none;">
	<h2>Headline</h2>
	<p>Body text</p>
	<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Image caption</figcaption></figure></div>

	<figure>
		<table>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
			</tr>
			<tr>
				<td>Row 1</td>
				<td>Row 1</td>
			</tr>
			<tr>
				<td>Row 2</td>
				<td>Row 2</td>
			</tr>
		</table>
		<figcaption>Table</figcaption>
	</figure>
</div>

<p>(End of DIV block)</p>

<p><i>Result:</i></p>

<a class="popup" title="[id]popup-content[/id]">Popup with ID</a>

<h4 id="popup-template">Popup without link (HTML)</h4>

<p>Here, the HTML content to be displayed in the popup is not specified in a separate, invisible DIV block, but rather in a TEMPLATE block within the link. This has the advantage that no ID needs to be specified. (Note: Naturally, the TEMPLATE block can also be used with popup links.) Two elements are required: the link text and any number of lines of HTML code.</p>

<p><i>Source text:</i></p>

Popup with HTML content
<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Image caption</figcaption></figure></div>

<p><i>Result:</i></p>

<a class="popup" title=" ">Popup with HTML content<template>
	<div><figure><img src="media/default-article-image.jpg" data-src="" alt="" /><figcaption>Image caption</figcaption></figure></div>
</template></a>

<h3 id="section-highlighting">Highlighting</h3>

<p>Snippets to highlight individual lines or longer text passages.</p>

<h4 id="quote">Quote</h4>

<p>The <i>source text</i> is already formatted text:</p>

<p>Every person has a hole in their heart that only God can fit into. And nothing less than God can fill this hole.</p>
<a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a>

<p><i>Result:</i></p>

<blockquote>
	<p>Every person has a hole in their heart that only God can fit into. And nothing less than God can fill this hole.</p>
	<cite><a href="https://www.pro-medienmagazin.de/blaise-pascal-der-philosoph-der-christ-wurde/" target="_blank" rel="noopener" title="">Blaise Pascal (1623–1662)</a></cite>
</blockquote>

<h4 id="bible">Bible quote</h4>

<p>With this snippet, the last two lines are automatically converted into a link:</p>

<p><i>Source text:</i></p>

You will seek me and find me, when you seek me with all your heart. I will be found by you, declares the Lord.
Jeremiah 29:13-14
https://www.bibleserver.com/ESV/Jeremia29%2C13-14

<p><i>Result:</i></p>

<blockquote class="biblequote">
	<p><i>You will seek me and find me, when you seek me with all your heart. I will be found by you, declares the Lord.</i></p>
	<cite>– <a href="https://www.bibleserver.com/ESV/Jeremia29%2C13-14" target="_blank" rel="noopener">Jeremiah 29:13-14</a> –</cite>
</blockquote>

<h4 id="textbox">Text box</h4>

<p>A single line of text is displayed in a "textbox".</p>

<p><i>Source text:</i></p>

Surely goodness and mercy shall follow me all the days of my life, and I shall dwell in the house of the Lord forever.

<p><i>Result:</i></p>

<p class="textbox">Surely goodness and mercy shall follow me all the days of my life, and I shall dwell in the house of the Lord forever.</p>

<h4 id="table">Table</h4>

<p>Text is displayed in tabular form with rows and columns.</p>

<p><i>Source text:</i></p>

Column A | Column B | Column C
Cell A1 | Cell B1 | Cell C1
Cell A2 | Cell B2 | Cell C2
Cell A3 | Cell B3 | Cell C3
Table title

<p><i>Result:</i></p>

<figure>
	<table>
		<tr>
			<th>Column A</th>
			<th>Column B</th>
			<th>Column C</th>
		</tr>
		<tr>
			<td>Cell A1</td>
			<td>Cell B1</td>
			<td>Cell C1</td>
		</tr>
		<tr>
			<td>Cell A2</td>
			<td>Cell B2</td>
			<td>Cell C2</td>
		</tr>
		<tr>
			<td>Cell A3</td>
			<td>Cell B3</td>
			<td>Cell C3</td>
		</tr>
	</table>
	<figcaption>Table title</figcaption>
</figure>

<p>Instead of | you can also use tabs as separators:</p>

<p><i>Source text:</i></p>

Column A	Column B	Column C
Cell A1	Cell B1	Cell C1
Cell A2	Cell B2	Cell C2
Cell A3	Cell B3	Cell C3
Table title

<h4 id="code">Code</h4>

<p>Formats the text as program code. Line breaks are preserved.</p>

<p><i>Source text:</i></p>

function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}

<p><i>Result:</i></p>

<pre class="textbox">
function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}
</pre>

<h3 id="section-embedding">Embedding</h3>

<p>This allows media (audio, video) or maps to be embedded in the article.</p>

<h4 id="audio">Audio clip</h4>

<p>Displays an audio player for playing an audio file. The MP3 file is inserted from the media library (you may need to upload it there first). An external link can also be specified. Only one audio clip is played at a time; that is, if playback of a clip is started, playback of the currently playing clip will stop.</p>

<p><i>Source text:</i></p>

media/Froschkonzert.mp3
Frog concert

<p><i>Result:</i></p>

<figure>
	<audio controls src="media/Froschkonzert.mp3"></audio>
	<figcaption>Frog concert</figcaption>
</figure>

<h4 id="audio-playlist">Audio clip for playlist</h4>

<p>Unlike a simple audio clip (see above), this audio clip is part of a playlist. If several such audio clips are present on the page, they will be played sequentially. The currently playing audio clip will be visually highlighted.</p>

<p><i>Source text:</i></p>

media/Froschkonzert.mp3
Frog concert

<p><i>Result:</i></p>

<figure class="playlist">
	<p>Frog concert</p>
	<p><audio controls src="media/Froschkonzert.mp3"></audio></p>
</figure>

<h4 id="video">Video clip</h4>

<p>Displays a video player for playing a video file. The MP4 file is inserted from the media library (you may need to upload it there first). Of course, an external link can also be specified.</p>

<p><i>Source text:</i></p>

media/wolken.mp4
Clouds

<p><i>Result:</i></p>

<figure>
	<video controls src="media/wolken.mp4"></video>
	<figcaption>Clouds</figcaption>
</figure>

<h4 id="iframe">IFRAME (video, map, ...)</h4>

<p>Inserts external content (e.g. YouTube video, GoogleMaps map) into the article using an IFRAME.</p>

<h5 id="youtube">Example: Embedding a YouTube video</h5>

<p>The embedding code can be obtained via the "Share" function on the YouTube page for a video.</p>

<p><i>Source text:</i></p>

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Lied: I Speak Jesus (Here Be Lions)

<p><i>Result:</i></p>

<figure>
	<iframe width="560" height="315" data-src="https://www.youtube.com/embed/FpGYImM_VeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
	<figcaption>Lied: I Speak Jesus (Here Be Lions)</figcaption>
</figure>

<p>In the embed code above (&lt;iframe ...), the "src" attribute was manually replaced with "data-src". This ensures that the video is not loaded immediately, but only after clicking the button, in compliance with data protection regulations.</p>

<p>The placeholder image displayed instead of the YouTube player is a screenshot uploaded to the media library with the filename "FpGYImM_VeM.jpg", where "FpGYImM_VeM" corresponds to the YouTube video ID as specified in the YouTube URL in the embed code after "embed/". Alternatively, any other image filename can be specified in the "data-img" attribute (example: data-img="video.png").</p>

<p>The "Privacy Policy" link points to the section with the id "#external-content" on the privacy policy page. The filename for the privacy policy is read from the system file "lib/config.php". By default, it is named "privacy". If the page has been given a different name, this must be updated accordingly in config.php (or alternatively via the <a href="lib/setup" target="_blank" rel="noopener" title="">Setup script</a>).</p>

<h5 id="googlemaps">Example: Embedding a GoogleMaps map</h5>

<p>The embedding code for the map can be obtained via the "Share" function in the menu on the GoogleMaps page.</p>

<p><i>Source text:</i></p>

<iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Google-Maps-Karte

<p><i>Result:</i></p>

<figure>
	<iframe data-img="media/gm-westpark.jpg" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1331.6806453458598!2d11.513305599999997!3d48.1225556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f875ba02a03736!2zNDjCsDA3JzIxLjIiTiAxMcKwMzAnNDcuOSJF!5e0!3m2!1sde!2sde!4v1660604605751!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	<figcaption>Google-Maps-Karte</figcaption>
</figure>

<p>In the embed code above (&lt;iframe ...), the "src" attribute was manually replaced with "data-src". This ensures that the map is not loaded immediately, but only after clicking the button, in compliance with data protection regulations.</p>

<p>The placeholder image displayed instead of the actual map is a screenshot uploaded to the media library with the filename "gm-westpark.jpg" and then specified in the manually added "data-img" attribute (data-img="media/gm-westpark.jpg").</p>

<h3 id="section-paragraph">Paragraph</h3>

<p>Snippets for formatting one or more lines.</p>

<h4 id="separator">Separator (* * *)</h4>

<p>Separators are suitable as visual dividers between two paragraphs, e.g. to write a postscript.</p>

<h2 class="center">* * *</h2>

<p>Here follows the separated paragraph...</p>

<h4 id="toc">Table of contents</h4>

<p>A table of contents is automatically generated based on the headings with IDs contained in the article. The IDs are used as jump targets. This demo article, in which the headings are tagged with IDs, serves as an example.</p>

<h4 id="toc-details">TOC, expandable</h4>

<p>As before, but expandable. This demo article, in which the headings are tagged with IDs, serves as an example. An example of how to use the snippet can be found at the very top of this article. Initially, the table of contents is expanded. If the "open" attribute is omitted, the table of contents is initially collapsed.</p>

<h4 id="summary">Section, expandable</h4>

<p>A section is initially hidden and can be expanded by clicking on the title:</p>

<p><i>Source text:</i></p>

Details
<p>Once upon a time...</p>
<p>And if they haven't died...</p>

<p><i>Result:</i></p>

<details class="textbox noprint">
	<summary><b>Details</b></summary>
	<p>Once upon a time...</p>
	<p>And if they haven't died...</p>
</details>

<h4 id="ul">List (● ● ●)</h4>

<p>The lines are displayed as bullet points.</p>

<p><i>Source text:</i></p>

Item 1
Item 2
Item 3

<p><i>Result:</i></p>

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

<p>Further indentations can also be made. However, this must be done manually.</p>

<ul>
	<li>Item 1</li>
	<li>Item 2
		<ul>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>
			<li>Sub-item 3</li>
		</ul>
	</li>
	<li>Item 3</li>
</ul>

<h4 id="ol">List (1. 2. 3.)</h4>

<p>The lines are displayed as numbered list items.</p>

<p><i>Source text:</i></p>

Item 1
Item 2
Item 3

<p><i>Result:</i></p>

<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

<p>Further indentation can be achieved by manually entering HTML tags:</p>


<ol>
	<li>Item 1</li>
	<li>Item 2
		<ol>
			<li>Sub-item 1</li>
			<li>Sub-item 2</li>
			<li>Sub-item 3</li>
		</ol>
	</li>
	<li>Item 3</li>
</ol>

<h4 id="footnote">Single footnote (*)</h4>

<p>Adds a single "asterisk" footnote to the article.</p>

<p><i>Source text:</i></p>

Name changed for privacy reasons.

<p><i>Result:</i></p>

<ul class="footnote" id="note">
	<b>Note:</b>
	<li>Name changed for privacy reasons.</li>
</ul>

<h4 id="footnotes">Multiple footnotes (1. 2. 3.)</h4>

<p>Adds multiple numbered footnotes to the article.</p>

<p><i>Source text:</i></p>

Like Flexbox, Grid Layout is a very modern and simple way to create responsive and flexible layouts without having to use fixed sizes and other CSS settings such as position, float or clear.
Elements can be placed anywhere within a grid, even on top of each other if desired.
Grid Layout is supported in all modern browsers (and with vendor-prefix -ms- even in IE10- IE11).

<p><i>Result:</i></p>

<ol class="footnote" id="notes">
	<b>Notes:</b>
	<li>Like Flexbox, Grid Layout is a very modern and simple way to create responsive and flexible layouts without having to use fixed sizes and other CSS settings such as position, float or clear.</li>
	<li>Elements can be placed anywhere within a grid, even on top of each other if desired.</li>
	<li>Grid Layout is supported in all modern browsers (and with vendor-prefix -ms- even in IE10- IE11).</li>
</ol>

<p>Footnotes can also be provided with links to jump back and forth, such as the reference to pseudonyms<a href="#pseudonym">*</a> in this example:</p>

<ul class="footnote" id="pseudonym">
	<b>Note:</b>
	<li>Name changed for privacy reasons.</li>
</ul>

<h4 id="protect-section">Protect</h4>

<p>This snippet can be used to protect text from being easily discovered or scraped by search engines and bots. To do this, the page must be linked within the editor via "[Open] &gt; Select article &gt; Link (protected) &gt; [Insert]." This specific internal linking method detects whether or not the page was accessed via an internal link within a reasonable timeframe. If it was, the text from the first specified text block is displayed; if not, the text from the second one appears. When combined with the "Single image &gt; as table" snippet, this snippet is suitable, for example, for protecting contact information in a legal notice (Impressum).</p>

<p>First, create two text blocks and insert their file paths into the editor via the file manager. Then, highlight both file paths and apply the snippet.</p>

<p><i>Source text:</i></p>

textblocks/example-text-protected.htm
textblocks/example-text-unprotected.htm

<p><i>Result:</i></p>

<?php
	if (TokenValid())
		include 'textblocks/example-text-protected.htm';
	else
		include 'textblocks/example-text-unprotected.htm';
?>

<h3 id="section-line">Line</h3>

<h4 id="nowrap">No auto-wrapping</h4>

<p>If text lines are to be broken at "break points" first, then the connected parts between these break points can be formatted with this snippet:</p> 

<p><i>Source text:</i></p>

First connected part, second connected part, third connected part.

<p><i>Result:</i></p>

<p><span class="nowrap">First connected part,</span> <span class="nowrap">second connected part,</span> <span class="nowrap">third connected part.</span></p>

<h3 id="section-comment">Comment</h3>

<p>Snippets for commenting out parts of the source code.</p>

<h4 id="remark-inline">Inline</h4>

<p>This allows you to comment out one or more words within a line.</p>

<p><i>Source text:</i></p>

<p>This is the first second time.</p>

<p><i>Result:</i></p>

<p>This is the <!-- first --> second time.</p>

<h4 id="remark-block">Block</h4>

<p>This allows you to comment out one or more lines.</p>

<p><i>Source text:</i></p>

<p>First line.</p>
<p>Second line</p>
<p>Third line.</p>
<p>Fourth line.</p>

<p><i>Result:</i></p>

<p>First line.</p>
<!--
<p>Second line</p>
<p>Third line.</p>
-->
<p>Fourth line.</p>

<h3 id="section-contact-link">Contact link</h3>

<p>Inserts a link to the contact form into the article. The subject and message text can be pre-filled.</p>

<h4 id="contact">plain</h4>

<p>Opens the contact form.</p>

<p><i>Source text:</i></p>

Contact form

<p><i>Result:</i></p>

<a href="contact">Contact form</a>

<h4 id="contact-subject">with subject</h4>

<p>Opens the contact form with a pre-filled subject line.</p>

<p><i>Source text:</i></p>

Contact form|Order

<p><i>Result:</i></p>

<a href="contact?subject=Order">Contact form</a>

<h4 id="contact-subject-message">with subject + message</h4>

<p>Opens the contact form with a pre-filled subject line and message text.</p>

<p><i>Source text:</i></p>

Contact form
Order
Message line 1{}Message line 2{}Message line 3{}{}Message line 5{}

<p><i>Result:</i></p>

<a href="contact?subject=Order&message=Message line 1{}Message line 2{}Message line 3{}{}Message line 5{}">Contact form</a>

<p>Note: For multi-line message text, {} is used as a line break.</p>

<h3 id="section-translation">Translation</h3>

<p>Snippets for the automated translation of the article or linked pages.</p>

<h4 id="lang">Multilingual article</h4>

<p>This snippet allows you to create bilingual articles with automatic switching between these two languages: (1) A non-English default language, such as German (de), and (2) English (en) for all users with a different language setting.</p>

<p>Further instructions and usage examples will be displayed after inserting the snippet.</p>

<h4 id="link-translate-target">Link</h4>

<p>This snippet inserts a link that opens the link destination in "Google Translate" and translates it into a target language. The source language to be used can be specified in the snippet's <b>x-data-translate-from</b> attribute (e.g., "de" for German). If left blank, the language specified in the HTML document's "lang" attribute is used. The target language is the language set in the user's browser (e.g., "en" for English). Redirection to "Google Translate" only occurs if the source and target languages differ.</p>

<p><i>Source text:</i></p>

More information can be found in the help file|help#setup.

<p><i>Result:</i></p>

More information can be found in the <a href="help#setup" target="_blank" rel="noopener" x-data-translate-from="">Help</a> file.

<h4 id="link-translate-page">Translate this page</h4>

<p>This snippet inserts a button to translate the page using "Google Translate". The source language to be used can be specified in the snippet's <b>x-data-translate-from</b> attribute (e.g., "de" for German). If left blank, the language specified in the HTML document's "lang" attribute is used. The target language is the language set in the user's browser (e.g., "en" for English). The button is only visible if the source and target languages differ.</p>

<p>Without selected text, a default link text is used (only visible if the article's language differs from the browser's language):</p> 

<p class="translate center hidden" x-data-translate-from=""></p>

<p>If you want to display custom link text for the button instead of the default link text, you can specify it within the <b>&lt;p&gt;</b> tag. When inserting the snippet, the highlighted text will be used for this purpose:</p>

<p><i>Source text:</i></p>

Translate

<p><i>Result</i> (only visible if the article's language differs from the browser's language):</p>

<p class="translate center hidden" x-data-translate-from="">Translate</p>

<h3 id="section-specialchars">Special characters</h3>

<p>These snippets provide quick access to frequently used special characters such as typographic quotation marks or the em dash that are not found on a standard computer keyboard. Some of the special character snippets are assigned a keyboard shortcut.</p>

<?php include 'lib/default-footer.php'; ?>
