Recent changes to Markdown Syntax

Markdown Syntax modified by Ingo

Ingo — Tue, 25 Aug 2020 15:29:15 -0000

--- v14
+++ v15
@@ -158,6 +158,15 @@
 ~~~
 [[icon name=fa-gavel shape=rectangle size=30 outersize=30 color=black bgcolor=inherit]]
 ~~~
+
+## Slide Shows
+You can combine images into a slide show per page. The slides are hidden and activated one after another. So they need to be in one line in markdown, otherwise the image will "jump".
+
+Here is a full example. It should be pretty much self explaining. Just play around with it:
+~~~
+[[slide src=https://www.w3schools.com/howto/img_nature_wide.jpg time=3 number="1/3" caption="nature" width=100%]][[slide src=https://www.w3schools.com/howto/img_snow_wide.jpg time=5 number="2/3" caption="snow" width=100%]][[slide src=https://www.w3schools.com/howto/img_mountains_wide.jpg time=10 number="3/3" caption="mountains" width=100%]]
+~~~
+
 # Videos
 ~~~
 [[embed url=https://www.youtube.com/watch?v=UvH572rz1Ng]]

Markdown Syntax modified by Ingo

Ingo — Wed, 19 Aug 2020 13:59:33 -0000

--- v13
+++ v14
@@ -32,6 +32,13 @@
     * [ ] Subitem
 ~~~

+## Block quotes
+~~~
+> You got the question?
+
+Yes, now it's clear how quoting works!
+~~~
+
 ## Headers
 ~~~
 # Header 1
@@ -62,32 +69,6 @@

 [[section align=right]]
 ~~~
-
-Especially in combination with those sections, it makes sense to change the layout a bit and stretch it over the whole width. This can be  achieved with the "startpage" macro:
-
-~~~
-[[startpage]]
-~~~
-
-## Image slideshow
-To show multiple images in a slideshow, you can simply use this macro. You can define an image URL, captions and durations to control the display a bit. Then all image slides on your wiki will be faded in and out. This also means, that you can have only one slideshow per page.
-
-* "src" can be an URL or the filename of an attachment
-* "time" is the duration, the image is shown in seconds
-* "number is a text, shown at the top of the image, indicating how many will follow
-* "caption" is a description of the image, shown at the bottom
-* "width" is the width of the image, in percent (80%) or pixel (150px)
-
-~~~
-[[slide src=image.png time=3 number="1/3" caption="image caption" width=100%]]
-~~~
-
-A full example:
-~~~
-[[slide src=https://www.w3schools.com/howto/img_nature_wide.jpg time=3 number="1/3" caption="nature"]][[slide src=https://www.w3schools.com/howto/img_snow_wide.jpg time=5 number="2/3" caption="snow"]][[slide src=https://www.w3schools.com/howto/img_mountains_wide.jpg time=10 number="3/3" caption="mountains"]]
-~~~
-
-**Note:** avoid newlines between the slides, as those will be shown in markdown.

 # Links
 ## Implicit
@@ -168,7 +149,7 @@
 [[img src=attached-image.jpg width=50%]]
 ~~~
 ## Standard Icons
-[Standard icons](/forge/wiki/Markdown Icons) are the ones which are also used on the CODESYS Forge Website. They can have a different foreground and background color. And they can also have a circle or rectangle shape. You define them like this:
+[Standard icons](Markdown Icons) are the ones which are also used on the CODESYS Forge Website. They can have a different foreground and background color. And they can also have a circle or rectangle shape. You define them like this:
 ~~~
 [[icon name=fa-gavel]]
 [[icon name=fa-gavel shape=circle size=20 outersize=60 color=white bgcolor=blue]]
@@ -212,18 +193,6 @@
 [[download url=https://forge.codesys.com/... label=installer]]
 ~~~

-The layout of the download button can be influenced with the following attributes:
-
-* float: left/right/none
-By default the button is floating to the right, so it is displayed beside the other text of the wiki page.
-* align: left/right/center
-This attribute aligns the button itself. So it makes most sense when float is set to none.
-
-Example:
-~~~
-[[download url=https://forge.codesys.com/... label=installer float=none align=center]]
-~~~
-
 ## CI/CD Badges
 ~~~
 [[drone]]

Markdown Syntax modified by Ingo

Ingo — Thu, 30 Jul 2020 09:37:53 -0000

--- v12
+++ v13
@@ -212,6 +212,18 @@
 [[download url=https://forge.codesys.com/... label=installer]]
 ~~~

+The layout of the download button can be influenced with the following attributes:
+
+* float: left/right/none
+By default the button is floating to the right, so it is displayed beside the other text of the wiki page.
+* align: left/right/center
+This attribute aligns the button itself. So it makes most sense when float is set to none.
+
+Example:
+~~~
+[[download url=https://forge.codesys.com/... label=installer float=none align=center]]
+~~~
+
 ## CI/CD Badges
 ~~~
 [[drone]]

Markdown Syntax modified by Ingo

Ingo — Sat, 11 Jul 2020 13:36:56 -0000

--- v11
+++ v12
@@ -72,6 +72,17 @@
 ## Image slideshow
 To show multiple images in a slideshow, you can simply use this macro. You can define an image URL, captions and durations to control the display a bit. Then all image slides on your wiki will be faded in and out. This also means, that you can have only one slideshow per page.

+* "src" can be an URL or the filename of an attachment
+* "time" is the duration, the image is shown in seconds
+* "number is a text, shown at the top of the image, indicating how many will follow
+* "caption" is a description of the image, shown at the bottom
+* "width" is the width of the image, in percent (80%) or pixel (150px)
+
+~~~
+[[slide src=image.png time=3 number="1/3" caption="image caption" width=100%]]
+~~~
+
+A full example:
 ~~~
 [[slide src=https://www.w3schools.com/howto/img_nature_wide.jpg time=3 number="1/3" caption="nature"]][[slide src=https://www.w3schools.com/howto/img_snow_wide.jpg time=5 number="2/3" caption="snow"]][[slide src=https://www.w3schools.com/howto/img_mountains_wide.jpg time=10 number="3/3" caption="mountains"]]
 ~~~

Markdown Syntax modified by Ingo

Ingo — Sat, 11 Jul 2020 08:58:07 -0000

--- v10
+++ v11
@@ -62,6 +62,21 @@

 [[section align=right]]
 ~~~
+
+Especially in combination with those sections, it makes sense to change the layout a bit and stretch it over the whole width. This can be  achieved with the "startpage" macro:
+
+~~~
+[[startpage]]
+~~~
+
+## Image slideshow
+To show multiple images in a slideshow, you can simply use this macro. You can define an image URL, captions and durations to control the display a bit. Then all image slides on your wiki will be faded in and out. This also means, that you can have only one slideshow per page.
+
+~~~
+[[slide src=https://www.w3schools.com/howto/img_nature_wide.jpg time=3 number="1/3" caption="nature"]][[slide src=https://www.w3schools.com/howto/img_snow_wide.jpg time=5 number="2/3" caption="snow"]][[slide src=https://www.w3schools.com/howto/img_mountains_wide.jpg time=10 number="3/3" caption="mountains"]]
+~~~
+
+**Note:** avoid newlines between the slides, as those will be shown in markdown.

 # Links
 ## Implicit

Markdown Syntax modified by Ingo

Ingo — Thu, 25 Jun 2020 18:07:29 -0000

--- v9
+++ v10
@@ -142,7 +142,7 @@
 [[img src=attached-image.jpg width=50%]]
 ~~~
 ## Standard Icons
-[Standard icons](Markdown Icons) are the ones which are also used on the CODESYS Forge Website. They can have a different foreground and background color. And they can also have a circle or rectangle shape. You define them like this:
+[Standard icons](/forge/wiki/Markdown Icons) are the ones which are also used on the CODESYS Forge Website. They can have a different foreground and background color. And they can also have a circle or rectangle shape. You define them like this:
 ~~~
 [[icon name=fa-gavel]]
 [[icon name=fa-gavel shape=circle size=20 outersize=60 color=white bgcolor=blue]]

Markdown Syntax modified by Ingo

Ingo — Tue, 23 Jun 2020 06:29:11 -0000

--- v8
+++ v9
@@ -147,6 +147,10 @@
 [[icon name=fa-gavel]]
 [[icon name=fa-gavel shape=circle size=20 outersize=60 color=white bgcolor=blue]]
 ~~~
+By default, the icons have a background, to avoid it just set the size and outersize to the same value and bgcolor to "inherit":
+~~~
+[[icon name=fa-gavel shape=rectangle size=30 outersize=30 color=black bgcolor=inherit]]
+~~~
 # Videos
 ~~~
 [[embed url=https://www.youtube.com/watch?v=UvH572rz1Ng]]

Markdown Syntax modified by Ingo

Ingo — Tue, 23 Jun 2020 06:04:17 -0000

--- v7
+++ v8
@@ -141,7 +141,12 @@
 ~~~
 [[img src=attached-image.jpg width=50%]]
 ~~~
-
+## Standard Icons
+[Standard icons](Markdown Icons) are the ones which are also used on the CODESYS Forge Website. They can have a different foreground and background color. And they can also have a circle or rectangle shape. You define them like this:
+~~~
+[[icon name=fa-gavel]]
+[[icon name=fa-gavel shape=circle size=20 outersize=60 color=white bgcolor=blue]]
+~~~
 # Videos
 ~~~
 [[embed url=https://www.youtube.com/watch?v=UvH572rz1Ng]]

Markdown Syntax modified by Ingo

Ingo — Sat, 20 Jun 2020 19:16:07 -0000

--- v6
+++ v7
@@ -49,12 +49,18 @@
 ~~~

 ## Regions of different color
-A very common design technique which works pretty well for mobile and desktop views, is the separation of regions by a different background and / or foreground color. This is supported by the macro 'section'. Supported are hex color code and color names.
+A very common design technique which works pretty well for mobile and desktop views, is the separation of regions by a different background and / or foreground color. This is supported by the macro 'section'. Supported are hex color code and color names. Additionally to the color, you can also change the default text-alignment within this region.

 ~~~
 [[section bgcolor=#FF0000 color=#00FF00]]

 [[section bgcolor=red color=green]]
+
+[[section align=left]]
+
+[[section align=center]]
+
+[[section align=right]]
 ~~~

 # Links

Markdown Syntax modified by Ingo

Ingo — Sat, 20 Jun 2020 18:51:59 -0000

--- v5
+++ v6
@@ -89,6 +89,14 @@
 ~~~

 The name of the heading anchor is the name of the heading in lower case and with dashes instead of spaces.
+
+## Links to User Profile
+The macro 'url' only creates the URL, not a full link. This way you can more easily extend the URL.
+~~~
+[[url target=profile]]                          # Outputs the URL as text
+[link to profile]([[url target=profile]])       # Create a link to the user profile of the current user
+[create new blog post]([[url target=blog]]/new) # Create a link to create a new blog post
+~~~

 ## Artifacts
 You can link other tools, pages, tickets, ...