Update.
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
{% block article %}
|
||||
<h1>markdown</h1>
|
||||
|
||||
<p>The <code>markdown</code> module provides bidirectional conversion between Markdown and HTML. It supports common Markdown syntax including headings, emphasis, code blocks, lists, links, and images.</p>
|
||||
<p>The <code>markdown</code> module provides bidirectional conversion between Markdown and HTML. It supports common Markdown syntax including headings, emphasis, code blocks, lists, links, images, and GitHub Flavored Markdown (GFM) extensions like tables, task lists, and autolinks.</p>
|
||||
|
||||
<pre><code>import "markdown" for Markdown</code></pre>
|
||||
|
||||
@@ -121,8 +121,12 @@ System.print(md) // # Hello World</code></pre>
|
||||
```
|
||||
Code block
|
||||
Multiple lines
|
||||
```
|
||||
|
||||
```javascript
|
||||
const x = 1;
|
||||
```</code></pre>
|
||||
<p>Inline code uses <code><code></code>, blocks use <code><pre><code></code>.</p>
|
||||
<p>Inline code uses <code><code></code>, blocks use <code><pre><code></code>. Language identifiers after the opening fence add a <code>class="language-{lang}"</code> attribute to the code element for syntax highlighting integration.</p>
|
||||
|
||||
<h3>Lists</h3>
|
||||
<pre><code>Unordered:
|
||||
@@ -137,6 +141,24 @@ Ordered:
|
||||
3. Third</code></pre>
|
||||
<p>Creates <code><ul></code> and <code><ol></code> with <code><li></code> items.</p>
|
||||
|
||||
<h3>Task Lists (GFM)</h3>
|
||||
<pre><code>- [ ] Unchecked task
|
||||
- [x] Checked task
|
||||
- [X] Also checked</code></pre>
|
||||
<p>Creates <code><ul class="task-list"></code> with checkbox inputs. Checkboxes are rendered as disabled to indicate they are display-only.</p>
|
||||
|
||||
<h3>Tables (GFM)</h3>
|
||||
<pre><code>| Header 1 | Header 2 | Header 3 |
|
||||
|----------|:--------:|---------:|
|
||||
| Left | Center | Right |
|
||||
| Cell | Cell | Cell |</code></pre>
|
||||
<p>Creates HTML tables with <code><thead></code> and <code><tbody></code>. Column alignment is specified in the separator row using colons: <code>:---</code> for left, <code>:---:</code> for center, <code>---:</code> for right.</p>
|
||||
|
||||
<h3>Autolinks (GFM)</h3>
|
||||
<pre><code>Visit https://example.com for more info.
|
||||
Email me at user@example.com</code></pre>
|
||||
<p>Bare URLs starting with <code>http://</code> or <code>https://</code> and email addresses are automatically converted to clickable links.</p>
|
||||
|
||||
<h3>Links and Images</h3>
|
||||
<pre><code>[Link text](https://example.com)
|
||||
</code></pre>
|
||||
@@ -213,6 +235,10 @@ ___</code></pre>
|
||||
<td><code><del></code>, <code><s></code></td>
|
||||
<td><code>~~text~~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><table></code></td>
|
||||
<td>GFM table syntax</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>Container tags (<code><div></code>, <code><span></code>, <code><section></code>, etc.) are stripped but their content is preserved. Script and style tags are removed entirely.</p>
|
||||
@@ -263,7 +289,7 @@ var page = "<html>
|
||||
|
||||
File.write("post.html", page)</code></pre>
|
||||
|
||||
<h3>Code Blocks with Language Hints</h3>
|
||||
<h3>Code Blocks with Language Classes</h3>
|
||||
<pre><code>import "markdown" for Markdown
|
||||
|
||||
var md = "
|
||||
@@ -274,7 +300,35 @@ System.print(\"Hello, World!\")
|
||||
|
||||
var html = Markdown.toHtml(md)
|
||||
System.print(html)
|
||||
// <pre><code>System.print("Hello, World!")</code></pre></code></pre>
|
||||
// <pre><code class="language-wren">System.print("Hello, World!")</code></pre></code></pre>
|
||||
|
||||
<h3>Tables</h3>
|
||||
<pre><code>import "markdown" for Markdown
|
||||
|
||||
var md = "
|
||||
| Name | Age | City |
|
||||
|-------|----:|:----------|
|
||||
| Alice | 30 | New York |
|
||||
| Bob | 25 | London |
|
||||
"
|
||||
|
||||
var html = Markdown.toHtml(md)
|
||||
System.print(html)</code></pre>
|
||||
|
||||
<h3>Task Lists</h3>
|
||||
<pre><code>import "markdown" for Markdown
|
||||
|
||||
var md = "
|
||||
## Project Tasks
|
||||
|
||||
- [x] Design database schema
|
||||
- [x] Implement API endpoints
|
||||
- [ ] Write unit tests
|
||||
- [ ] Deploy to production
|
||||
"
|
||||
|
||||
var html = Markdown.toHtml(md)
|
||||
System.print(html)</code></pre>
|
||||
|
||||
<h3>Combining with Templates</h3>
|
||||
<pre><code>import "markdown" for Markdown
|
||||
@@ -329,6 +383,6 @@ System.print(clean) // Safe **content**</code></pre>
|
||||
|
||||
<div class="admonition note">
|
||||
<div class="admonition-title">Note</div>
|
||||
<p>Language identifiers after code fences (e.g., <code>```wren</code>) are currently ignored. The code is rendered without syntax highlighting. Consider using a client-side syntax highlighter like Prism.js or highlight.js for the resulting HTML.</p>
|
||||
<p>Language identifiers after code fences (e.g., <code>```wren</code>) are added as <code>class="language-{lang}"</code> to the code element. This is compatible with syntax highlighters like Prism.js or highlight.js.</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user