Astro Markdown Render

Markdown for the modern Era. Render multiple interactive elements directly from Markdown

This is the rendering of the 'main' examples page

this page illustrates all use cases supported in this project.
Note, all headings get anchors and generate links

Code block

The code block offers a copy button visible on hover over the code.
javascript
const count = 0
console.log(count)
Copied!
python
for item in my_list:
  print(item)
Copied!

Images

Images are encapsulated inside a component that can open them in a Modal full view for Pan and zoom function
![astro markdown render](./astro-markdown-render-small.png)
Copied!
will generate this image
astro markdown render

Advanced Image Directive

In order to give more options, using the image directive allows to pass more arguments from markdown
:image[]{src=./astro-markdown-render-small.png alt="Astro Markdown Render" height=200}
Copied!
will generate this image height adjusted image with respect to the aspect ratio
Astro Markdown Render

SVG Image

Links

Tables

Markdown Simple Table

A markdown table like this one
| Column 1 | Column 2 |
|----------|----------|
| Row 1    | Row 1 c2 |
| Row 2    | Row 2 c2 |
Copied!
is a table that has a low number of lines and therfore gets a simple table view
Column 1Column 2

Markdown Data Table

A table with a high number of lines gets a data-table element with filter and pagination
NameAgeCity

XLSX Table

It is also possible to create tables in xlsx format. This link of .xlsx extension
[Table1](./Table1.xlsx)
Copied!
will generate this table
Table1 - SheetExample1
SheetJS Table Export
Column 1Column 2Column 3Column 4
101202303404
105210315420
109218327436

Diagrams from code

This is a concept where diagrams are generated from a code block that witholds the description needed to generate them. Note these sorts of diagrams are much more informative for automation and LLMs processing than usual bitmaps or vectorial images.

Plantuml

This is a plantuml sequence diagram
MichaelMichaelMariaMariaMarcoMarcoMirandaMirandaMarioMarioMathildaMathildaMessage(Hello)Message(Hi)Message(Hi there)Message(Hallo)Message(Hallo)

mermaid

This is a mermaid pie chart diagram
Error 400: Error: An error occurred while converting the diagram

Kroki

this is a kroki Block diagram
blockdiag blockdiag { Kroki -> is -> Awesome; } Kroki is Awesome

3D Model viewer

Model Viewer Makrdown plugin
just by inserting a link to a .glb file
[Astronaut](./Astronaut.glb)
Copied!
will generate this 3D model
Astronaut

From code

This piece of code using as code language yaml and code meta-data : glb as follows
Code
will generate this 3D model with the provided files.
Lantern

References

simple reference

this is how you can reference a page
Link to page::image-svg
Copied!
will produce this
Link to image-svg

deep path reference

A slug is only unique within a content type, therefore in case of multiple files with the same folder name and title, it is possible to use the automatically generated unique identifier available in the index.json
Link to page::trees.image-svg
Copied!
will link the correct url of the item in path folder/trees/image-svg/readme.md

Below are further unit test examples pages