Text Decoration Preview

Bold text.

Italic text.

Bold and italic text.

Strikethrough text.

A sentence containing highlighted text.

You can add ruby text(furigana) annotations.

scss/canvas/component/_text-decorator.scss

CSS Variables

CSS Variable Default
--strong-font-weight var(--font-weight-bold) (700)
--mark-font-weight var(--font-weight-bold) (700)
--mark-color-bg var(--color-accent)
--rp-font-weight var(--font-weight-normal) (400)
scss/canvas/component/_text-decorator.scss

Elements

Element Style
<strong> / **text** Bold weight
<mark> Bold + accent background
<rp> Ruby parentheses (normal weight)
scss/canvas/component/_text-decorator.scss

Customization Example

Override mark background and weight:

---
style: |
  :root {
    --mark-color-bg: #fef3c7;
    --mark-font-weight: 900;
  }
---

This sentence has highlighted text with black weight.

scss/canvas/component/_text-decorator.scss