Demo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo labore aperiam, asperiores doloribus earum qui id harum neque modi nostrum similique. Rerum consequatur ab eaque velit consequuntur blanditiis praesentium commodi.

Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita.

Text can be bold, italic, strikethrough and even combined.

Header 2

Header 3

Header 4

Header 5

Header 6

“Simplicity is the ultimate sophistication.”

— Leonardo da Vinci

• Item 1
• Item 2
• Item 3
• Item 4

Syntax Highlighting

Steno renders fenced code blocks with language classes that can be styled by the theme:

```js
export default {
  data() {
    return {
      msg: "Highlighted!",
    };
  },
};
```

export default {
  data() {
    return {
      msg: "Highlighted!",
    };
  },
};

Photo & Video

To write a caption to a photo use the figcaption tag:

<figcaption>Wow</figcaption>

Styling Images

You can style images in your content using various options provided by Aplós. Here's how to apply each styling option:

• not-rounded: Remove the border radius from an image.
• static: Prevent an image from being resized when hovered or active.
• no-border: Remove the border from an image.
• start / end: Float the image to the start or end of the text.
• Size Options:
  • small: Make an image smaller.
  • medium: Make an image medium-sized.
  • full: Make an image use 100% of the page's width.
• Visual Effects:
  • shadow: Add a shadow to an image.
  • mono: Make an image monochrome.
  • invert: Invert the colors of an image.
  • blur: Blur an image.
  • sepia: Add a sepia effect to an image.
  • pixel: Pixelate an image.
  • transparency: Give an image a transparent (checkerboard) background.

To apply any of these options, use the following syntax:

![My image](./image.png#option)

For example, to make an image small, use the following syntax:

![My image](./image.png#small)

![My image](./image.png#small#shadow)

![Photo of mountain range under clear sky](https://images.unsplash.com/photo-1501082183835-b7b33db89c3f?q=80&w=2920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D#full)

Information Boxes

Aplus has various types of information boxes.

• The info box provides general information.
• The tip box provides helpful tips.
• The warning box indicates potential issues or concerns.
• The danger box warns about dangerous situations.
• The details block provides additional details or explanations.

Admonitions use GitHub-style blockquote syntax:

> [!INFO]
> This is an info box.

> [!TIP]
> This is a tip.

> [!WARNING]
> This is a warning.

> [!DANGER]
> This is a dangerous warning.

> [!NOTE]
> This is a note.

<details class="details">
  <summary>Details</summary>
  <p>This is a details block.</p>
</details>

Miscellaneous

Time (<time>)

You can show a specific time by using the <time> tag:

<time>10:00</time>

10:00

Time Animation

You also can have an animation to the time like this one: 11:00

<time>**11:00**</time>

11:00

Small Text (<small>)

You can add small text by using the <small> tag.

<small>Something Small</small>

Something Small

Progress Bar (<progress>)

You can add a progress bar by using the <progress> tag:

<progress value="50" max="100"></progress>

Range (<input type="range">)

You can add a range by using the <input type="range"> tag:

<input type="range" max="100" value="33" />

Sample Output (<samp>)

You can add a sample output by using the <samp> tag:

<samp>Sample Output</samp>

Sample Output

Legend

You can add a legend by using the <legend> tag:

<legend>Legend</legend>

Inline Quote (<q>)

You can add an inline quote by using the <q> tag:

<q>Inline Quote</q>

Inline Quote

Grammar Mistakes (<u>)

You can add a text that tries to replicate grammar mistakes by using the <u> tag:

<u>Trying to replicate grammar mistakes</u>

Trying to replicate grammar mistakes

Deleted Text (<del>) & Inserted Text (<ins>)

You can add deleted text by using the <del> tag:

<del>Deleted Text</del>
<ins>Inserted Text</ins>

Deleted Text Inserted Text

Keyboard Input (<kbd>)

You can add keyboard input by using the <kbd> tag:

<kbd>⌘ Super</kbd> + <kbd>Space</kbd>

⌘ Super + Space

Marked Text (<mark>)

You can add marked text by using the <mark> tag:

<mark>Marked Text</mark>

Marked Text

Check Boxes

Steno's Markdown renderer supports GFM task lists out of the box, no plugin needed:

- [ ] Check Box

- [x] Checked Box

- [ ] Unchecked Bo

• Check Box

• Checked Box

• Unchecked Box