Markdown Syntax Guide

This explains the Markdown syntax and HTML tags available in this application.

Basic Markdown Syntax

Headings

# 見出し1 (最大)
## 見出し2 (大)
### 見出し3 (中)

Text Formatting

**Bold**
*Italic*
***Bold Italic***
~~Strikethrough~~
`Inline code`

Lists

- Bullet list
- Item 2
  - Nested item

1. Numbered list
2. Item 2
   1. Nested numbered

Links

[Link text](https://example.com)
[Internal link](./other-page)

• External links can be created via the toolbar's internet icon.
• Internal links can be created by pressing the toolbar's link button and selecting an existing page.

Images

![Alt text](imageURL)
![Alt text](imageURL){{size:60%}}  // Size specification (only 30, 60, 90)

• Press the image button on the toolbar to upload or select an image file.

Code Blocks

```javascript
const example = "コードブロック";
```

Tables

| Column1 | Column2 | Column3 |
|-----|-----|-----|
| Data1 | Data2 | Data3 |

Blockquotes

> Quote
> Multi-line quote

Allowed HTML Tags

Basic Tags

• <p> - Paragraph
• <div> - Block element
• <span> - Inline element
• <br> - Line break
• <hr> - Horizontal rule

Heading Tags

• <h1> - <h6> - Headings

List Tags

• <ul>, <ol>, <li> - Lists

Table Tags

• <table>, <thead>, <tbody>, <tr>, <th>, <td> - Tables

Links and Images

• <a href="URL"> - Link
• <img src="URL" alt="Alt text"> - Image

Text Formatting Tags

• <strong>, <b> - Bold
• <em>, <i> - Italic
• <u> - Underline
• <s>, <del> - Strikethrough
• <small> - Small text
• <big> - Large text (deprecated but allowed)

Code-related

• <code> - Inline code
• <pre> - Preformatted text

Blockquote

• <blockquote> - Blockquote

Custom Tags

Internal Links

[[page/path]]
[[sidebar]]  // Sidebar link

Custom Styles with the style Attribute

To maintain security, only the following CSS properties are allowed:

Allowed CSS Properties

• font-size - Font size
• color - Text color
• font-weight - Font weight
• font-style - Font style (e.g., italic)
• text-decoration - Text decoration (e.g., underline)
• text-align - Text alignment

Examples

Changing Font Size

Normal text <span style="font-size: 1.5em;">Large text</span> <span style="font-size: 0.8em;">Small text</span>

Changing Text Color

<span style="color: red;">Red text</span>
<span style="color: #3b82f6;">Blue text</span>
<span style="color: rgb(34, 197, 94);">Green text</span>

Combined Styles

Monthly <span style="font-size: 2em; color: #ff6b35; font-weight: bold;">¥1,980</span> <span style="font-size: 0.8em; color: #666;">tax included</span>

Text Decoration

<span style="text-decoration: underline;">Underlined</span>
<span style="font-style: italic;">Italic</span>
<span style="font-weight: bold;">Bold</span>

Text Alignment

<div style="text-align: center;">Centered</div>
<div style="text-align: right;">Right aligned</div>

Pricing Display Example

## Premium Plan

<div style="text-align: center;">
  <span style="font-size: 2.5em; color: #059669; font-weight: bold;">¥2,980</span>
  <span style="font-size: 0.9em; color: #6b7280;">/mo</span>
</div>

**Features:**
- <span style="color: #dc2626;">✗</span> Basic features
- <span style="color: #059669;">✓</span> Premium features
- <span style="color: #059669;">✓</span> Priority support

Security Restrictions

The following elements are not allowed for security reasons:

Prohibited CSS Properties

• background - Background-related (possible XSS)
• position - Positioning (can break layout)
• display - Display property (can break layout)
• width, height - Size properties (can break layout)

Prohibited Values

• javascript: - JavaScript code
• url() - External URL references
• expression() - IE-specific expressions
• <, > - Values containing HTML tags

Prohibited Tags

• <script> - JavaScript execution
• <style> - CSS definitions
• <iframe> - Embedding external content
• <object>, <embed> - Plugin content

Notes

1. Security: Disallowed CSS properties or values will be automatically removed
2. Compatibility: Prefer standard Markdown syntax where possible
3. Preview: Use the editor preview to check actual rendering
4. Performance: Avoid overly complex styles; keep decorations simple