Markdown Syntax Wiki Page

[SDXC]

When working with Markdown I often have to check or copy some lines for the many "advanced" formatting possibilities Markdown and Wiki.js provide. While the page on docs.requarks.io provides most of the syntax with examples, I thought it misses some touches around UX. So I created a local wiki reference page that highlights the formatting results in the first tab and shows you the exact source of the shown example in the second tab. I didn't add the shortcuts and some of the additional descriptions, but I think it still represents a nice cookbook-like reference for the users and is also quickly accessible and locally available.

As a nice small detail I have added the page as a seperate and prominent menu entry near the top, also using the markdown icon which gives the final touch.

Design wise I went for a kind of "result-first-source-second" approach because in case of formatting topics I think it is easier and more distinctive to find what you're looking for because it catches your eye much easier. That's also what made wiki.js so attractive for me. It was the design that made me look more into wiki.js first.

Page as Markdown (English):
Markdown-WikiJS-EN.md

Page as Markdown (German):
Markdown-WikiJS-DE.md

[diomat]

That looks nice! Can you provide the Markdown code? :) Personally I'm fine if it's in german.

[SDXC]

Thanks for the feedback. Attached below you'll find the Markdown code and the assets used for the page. Note that the "baukasten.png" is taken from https://www.eggerpumps.com/en-us/technology/mountings-designs . If you need to be copyright conform you might want to change that asset. The emoji cheat sheet is a compiled image with all emoji codes from the linked webpage in the Markdown code. I can't find the download link anymore so I attached the image directly.

Markdown-Syntax.md

[DarkDau]

The scaling does not work, did you patch wikijs for that?
The `

Das Bild ist direkt  im Text eingebettet.
Damit es gut in den Textfluss passt, ist die Auflösung entsprechend auf 16x16 Pixel gesetzt.
Ohne die optionale Angabe der Dimension würde das Bild in voller Auflösung ausgegeben.`

[SDXC]

Hi @DarkDau
No, I didn't install any additional patches/plugins. Just checked again with 2.5.298 and it works correctly in my instance.
Did you enable the feature "Image Size" in the settings of Wiki.js?
Check out the following setting in the admins backend: Module/Rendering/Pipeline/markdown -> html/Image Size

[DarkDau]

hhm, Wiki.js 2.5.298 and image size is enabled. strange

[DarkDau]

I did find one typo in my source, Sorry for complain, it works
Thank you for sharing this excellent file!

[diomat]

Thank you very much!

[fguisso]

Thank you! I translated it into my language and put this page in the wikijs documentation, this way new users can learn how to use it.

Portuguese(pt-br) version:
Markdown-Syntax-Portuguese.md

[amlloyd]

This is super helpful, thank you. Is there an English version of this anywhere?

[SDXC]

I made a quick translation and attached it to my main post.

You might want to check it out in regards of formatting and using the correct english terminology of the features though.