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)python
for item in my_list:
print(item)Images
Simple Image link
Images are encapsulated inside a component that can open them in a Modal full view for Pan and zoom function
will generate this image
×
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}will generate this image height adjusted image with respect to the aspect ratio
SVG Image
×
Links
- external link Astro Markdown Render github repo link is external and opens in a new page.
- Link to the Image entry opens in the same page
Tables
Markdown Simple Table
A markdown table like this one
| Column 1 | Column 2 |
|----------|----------|
| Row 1 | Row 1 c2 |
| Row 2 | Row 2 c2 |is a table that has a low number of lines and therfore gets a simple table view
| Column 1 | Column 2 |
|---|
Markdown Data Table
A table with a high number of lines gets a data-table element with filter and pagination
| Name | Age | City |
|---|
XLSX Table
It is also possible to create tables in xlsx format. This link of
.xlsx extension[Table1](./Table1.xlsx)will generate this table
Table1 - SheetExample1
| Column 1 | Column 2 | Column 3 | Column 4 |
| 101 | 202 | 303 | 404 |
| 105 | 210 | 315 | 420 |
| 109 | 218 | 327 | 436 |
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
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
3D Model viewer
Model Viewer Makrdown plugin
models from https://modelviewer.dev/editor/
From a link
just by inserting a link to a .glb file
[Astronaut](./Astronaut.glb)will generate this 3D model
From code
This piece of code using as code language
yaml and code meta-data : glb as follows
×
will generate this 3D model with the provided files.
- poster : allows fast page load, by loading the image only first.
- environment-image : for lighting effect
References
simple reference
this is how you can reference a page
Link to page::image-svgwill 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.jsonLink to page::trees.image-svgwill link the correct url of the item in path
folder/trees/image-svg/readme.mdLink to trees.image-svg
Below are further unit test examples pages