iplus1 Logo
← Back to News
News

Markdown Features Showcase

An example post demonstrating images and complex tables

Working with Images

Here is an example of including an SVG and a PNG file from the relative images/ directory.

Standard Markdown Images

This will render the images in their native or optimized sizes:

SVG Example: A simple SVG

PNG Example: A simple JPEG

Sizing Images

To influence the size of an image in standard Markdown, you can use raw HTML <img> tags. This allows you to set the width and height properties. (Note: Depending on your Astro configuration, raw HTML image tags might require the images to be in the public folder instead of src, but this is the standard Markdown way to size items).

Resized SVG (Width: 100px): Resized SVG

Resized JPEG (Width: 200px): Resized JPEG

Complex Markdown Tables

You can create complex tables with text alignment, bold text, and even inline HTML or images within the cells.

Feature AreaBasic SupportPremium SupportEnterprise Support
Response Time48 Hours24 Hours1 Hour
CommunicationEmailEmail & ChatDedicated Slack
On-Site Visits❌ (No)❌ (No)✅ (Unlimited)
Status IconBasicPremium🚀

Tip: You can use colons : in the markdown table separator row (| :--- |) to dictate the text alignment of the column (left, right, or center).

Grid Visible Table

To force a visible grid border around a table inside standard Markdown where default typographic styles might hide borders, you can explicitly use HTML tables with inline border classes:

<table class="w-full border-collapse border border-border text-left my-6">
  <thead>
    <tr class="bg-secondary/20">
      <th class="border border-border/50 p-3 font-bold text-foreground">Service Level</th>
      <th class="border border-border/50 p-3 font-bold text-foreground">Description</th>
      <th class="border border-border/50 p-3 font-bold text-foreground">Included Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-border/50 p-3 text-muted-foreground">Standard</td>
      <td class="border border-border/50 p-3 text-muted-foreground">Basic maintenance and updates.</td>
      <td class="border border-border/50 p-3 text-muted-foreground font-mono">10</td>
    </tr>
    <tr>
      <td class="border border-border/50 p-3 text-muted-foreground">Professional</td>
      <td class="border border-border/50 p-3 text-muted-foreground">Priority support and feature implementation.</td>
      <td class="border border-border/50 p-3 text-muted-foreground font-mono">25</td>
    </tr>
    <tr>
      <td class="border border-border/50 p-3 text-muted-foreground">Enterprise</td>
      <td class="border border-border/50 p-3 text-muted-foreground">24/7 coverage with dedicated account management.</td>
      <td class="border border-border/50 p-3 text-muted-foreground font-mono">Unlimited</td>
    </tr>
  </tbody>
</table>
Service Level Description Included Hours
Standard Basic maintenance and updates. 10
Professional Priority support and feature implementation. 25
Enterprise 24/7 coverage with dedicated account management. Unlimited

Comprehensive Markdown Features

Below is a showcase of common Markdown features, displaying how to write them followed by how they render.

Headers

Syntax:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Rendered:

Heading 1

Heading 2

Heading 3

Heading 4

Text Emphasis

Syntax:

**Bold text** or __Bold text__
*Italic text* or _Italic text_
~~Strikethrough text~~
***Bold and italic***

Rendered: Bold text or Bold text
Italic text or Italic text
Strikethrough text
Bold and italic

Lists

Unordered Lists

Syntax:

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2

Rendered:

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2

Ordered Lists

Syntax:

1. First item
2. Second item
   1. Sub-item A
   2. Sub-item B

Rendered:

  1. First item
  2. Second item
    1. Sub-item A
    2. Sub-item B

Task Lists

Syntax:

- [x] Completed task
- [ ] Incomplete task

Rendered:

  • Completed task
  • Incomplete task

Syntax:

[Visit iplus1 GmbH](https://www.iplus1.de)
Autolink: https://www.iplus1.de

Rendered: Visit iplus1 GmbH
Autolink: https://www.iplus1.de

Blockquotes

Syntax:

> This is a blockquote.
> It can span multiple lines.
>> And can even be nested!

Rendered:

This is a blockquote. It can span multiple lines.

And can even be nested!

Code Blocks

Inline Code

Syntax:

To install dependencies, run the `npm install` command in your terminal.

Rendered: To install dependencies, run the npm install command in your terminal.

Fenced Code Blocks

Syntax:

```typescript
interface User {
  id: number;
  name: string;
}

function greet(user: User) {
  console.log(`Hello, ${user.name}!`);
}
```

Rendered:

interface User {
  id: number;
  name: string;
}

function greet(user: User) {
  console.log(`Hello, ${user.name}!`);
}

Horizontal Rules

Syntax:

---
***
___

Rendered:

Mermaid

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
---
config:
  sankey:
    showValues: false
---
sankey

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366