Skip to content

Commit

Permalink
Update Extensions section in README (#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
takezoe authored Jan 27, 2024
1 parent 2f67ab7 commit a09fdcd
Showing 1 changed file with 8 additions and 58 deletions.
66 changes: 8 additions & 58 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ sanitize | false | Ignore any HTML that has been input.
langPrefix | "lang-" | Prefix of class attribute of code block
headerPrefix | "" | Prefix of id attribute of header
safelist | See [Options.java](https://github.com/gitbucket/markedj/blob/master/src/main/java/io/github/gitbucket/markedj/Options.java) | Safelist of HTML tags.
extensions | empty | Extensions. See [Extensions](#extensions) section

By default, markedj uses Jsoup's safelist mechanism for HTML rendering. It restricts renderable tags, attributes and even protocols of attribute values. For example, the image url must be `http://` or `https://` by default. You can remove this restriction by customizing the safelist as follows:

Expand Down Expand Up @@ -75,9 +76,7 @@ String html = Marked.marked("> [!NOTE]\n> This is a note!", options);

Support for github like [alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts).

For styling, some project-specific CSS is required. SVG icons are embedded but can be replaced by configuration.

#### Usage
For styling, some project-specific CSS is required.

```java
Options options = new Options();
Expand All @@ -89,72 +88,23 @@ options.addExtension(gfmAlerts);
String html = Marked.marked("> [!NOTE]\n> This is a note!", options);
```

#### Supported alert types
Supported alert types are `NOTE`, `TOP`, `IMPORTANT`, `WARNING`, and `CAUTION`. Here is a Markdown example:

**Note**
```markdown
> [!NOTE]
> Useful information that users should know, even when skimming content.
```
**Note HTML**
```html
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Useful information that users should know, even when skimming content.</p>
</div>
```

**Tip**
```markdown
> [!TIP]
> Helpful advice for doing things better or more easily.
```
**Tip HTML**
```html
<div class="markdown-alert markdown-alert-tip">
<p class="markdown-alert-title">Tip</p>
<p>Helpful advice for doing things better or more easily.</p>
</div>
```

**Important**
```markdown
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
```
**Important HTML**
```html
<div class="markdown-alert markdown-alert-important">
<p class="markdown-alert-title">Important</p>
<p>Key information users need to know to achieve their goal.</p>
</div>
```
This is translated to the following HTML:

**Warning**
```markdown
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
```
**Warning HTML**
```html
<div class="markdown-alert markdown-alert-warning">
<p class="markdown-alert-title">Warning</p>
<p>Urgent info that needs immediate user attention to avoid problems.</p>
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>Useful information that users should know, even when skimming content.</p>
</div>
```

**Caution**
```markdown
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
```
**Caution HTML**
```html
<div class="markdown-alert markdown-alert-caution">
<p class="markdown-alert-title">Caution</p>
<p>Advises about risks or negative outcomes of certain actions.</p>
</div>
```
Generated HTML can be customized by implementing your own renderer. [DefaultGFMAlertRenderer](https://github.com/gitbucket/markedj/blob/master/src/main/java/io/github/gitbucket/markedj/extension/gfm/alert/DefaultGFMAlertRenderer.java) is used by default.

## for Developers

Expand Down

0 comments on commit a09fdcd

Please sign in to comment.