This commit is contained in:
2026-01-26 10:21:03 +01:00
parent fe2f087d9f
commit fbc1a6e294
40 changed files with 3478 additions and 547 deletions
+59 -5
View File
@@ -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>&lt;code&gt;</code>, blocks use <code>&lt;pre&gt;&lt;code&gt;</code>.</p>
<p>Inline code uses <code>&lt;code&gt;</code>, blocks use <code>&lt;pre&gt;&lt;code&gt;</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>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> with <code>&lt;li&gt;</code> items.</p>
<h3>Task Lists (GFM)</h3>
<pre><code>- [ ] Unchecked task
- [x] Checked task
- [X] Also checked</code></pre>
<p>Creates <code>&lt;ul class="task-list"&gt;</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>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</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)
![Alt text](image.png)</code></pre>
@@ -213,6 +235,10 @@ ___</code></pre>
<td><code>&lt;del&gt;</code>, <code>&lt;s&gt;</code></td>
<td><code>~~text~~</code></td>
</tr>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>GFM table syntax</td>
</tr>
</table>
<p>Container tags (<code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, <code>&lt;section&gt;</code>, etc.) are stripped but their content is preserved. Script and style tags are removed entirely.</p>
@@ -263,7 +289,7 @@ var page = "&lt;html&gt;
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)
// &lt;pre&gt;&lt;code&gt;System.print("Hello, World!")&lt;/code&gt;&lt;/pre&gt;</code></pre>
// &lt;pre&gt;&lt;code class="language-wren"&gt;System.print("Hello, World!")&lt;/code&gt;&lt;/pre&gt;</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 %}