A markdown-html parser written in zig.
| docs | adicionando asciidoc ao parser | |
| src | adicionando asciidoc ao parser | |
| .gitignore | chore(git): ignoring zig files, mac, swp | |
| build.zig | adicionando asciidoc ao parser | |
| build.zig.zon | chore(zig): ran zig init | |
| libmain.a | adicionando asciidoc ao parser | |
| README.adoc | adicionando asciidoc ao parser | |
| thous.webp | init | |
Important
Be kind: Did you find any English issues? So sorry, it is not my main language, I am doing my best. :)
Thous
Note
Disclaimer about the name: All of my projects have names derived from the fauna and flora of Brazil, especially the Caatinga biome.
Cerdocyon thous (Cachorro-do-mato, pt-BR)
also known as, in pt-BR, graxaim-do-mato, lobinho, or in english crab-eating fox, belongs to the genus Cerdocyon, the order Carnivora, and the family Canidae. It is a typical medium-sized canid, with a body length that can vary between 60 and 70 cm. In addition, its tail measures approximately 30 cm, its height about 37 cm, and its weight varies from 5 to 7 kg in adult individuals. The coat is short and quite variable, exhibiting a coloration ranging from gray to brown, with a stripe of black hairs that runs from the nape of the neck to the tip of the tail, showing a lighter coloration in the chest and belly area. The limbs have darker portions.
thous
Project
This project has the goal to convert markdown (.md) or asciidoc (.adoc) file into a html file. The HTML file returned will contain some classes to be easy customized.
Note
This is my first zig project. The initial goal is understand and study about the language. No AI have been used to developer this project (that’s crazy, right?). I love the process of coding and I fell that I learn better without AI. :) So, I do not care about if the project will take years to be finish.
Project structure
Tip
Dev note:
This is my first Zig project. So, all files will contain comments to explain what I am trying to do.
Simple Diagram
flwochart TD
io[In/Out]
sl[Strategy Layer]
fl[Facade Layer]
uf[Unit functions]
io ==> |in| sl ==> fl ==> uf ==> |out| ioThe parser
For better design, all tags will contain a CSS with thous-- as prefix.
For example: thous--h1, thous--p, thous--section.
This is to try to avoid any conflict with other projects.
Also, all style for each class will use variables.
Note
TODO: Create the table of variables and classes
Headers
Header markdown
# Title h1
...
###### My little Thous |Header in asciidoc
= Title h1
====== My little Thous in asc2docHeader html
<h1 class="thous-h1" id="title-h1"></h1>
<h6 id="my-little-thous" class="thous-h6"></h6>Text Formatting
Text formatting markdown
**Bold text** or **bold text**
_Italic text_ or _italic text_
**_Bold and italic_** or **_bold and italic_**
~~Strikethrough text~~
`Inline code`Text formatting in asciidoc
*Bold text*
_italic text_
*_bold italic text_*
`inline code`
"`double quotes`"
'`single quotes`'Text formatting html
<span class="thous--bold"></span>
<span class="thous--italic"></span>
<span class="thous--bold thous--italic"></span>
<span class="thous--strikethrough"></span>
<span class="thous--inline-code"></span>List
Ordered
List ordered in markdown
1. First item
2. Second item
1. Nested numbered item
2. Another nested item
3. Third itemList ordered in asciidoc
1. Proton
2. Neutrons
3. Electrons
.. nested
or
. Proton
. Neutrons
. Electrons
.. nestedList ordered in Html
1.
<ol class="thous--ol">
<li class="thous--li">First item</li>
<li class="thous--li">Second item</li>
<ol class="thous--ol">
<li class="thous--li">Nested numbered item</li>
<li class="thous--li">Another nested item</li>
</ol>
<li class="thous--li">Third item</li>
</ol>Unordered
List Unordered in markdown
- Item 1
- Item 2
- Nested item 2.1
- Nested item 2.2
- Deep nested item 2.2.1
- Item 3
* Alternative bullet
- Another alternative bulletList Unordered in asciidoc
* Item 1
* Item 2
** Nested item 2.1
** Nested item 2.2
*** Deep nested item 2.2.1
* Item 3List Unordered in html
<ul class="thous--ul">
<li class="thous--li">Item 1</li>
<li class="thous--li">Item 2</li>
<ul class="thous--ul">
<li class="thous--li">Nested item 2.1</li>
<li class="thous--li">Nested item 2.2</li>
<ul class="thous--ul">
<li class="thous--li">Nested item 2.2.1</li>
</ul>
</ul>
<li class="thous--li">Item 3</li>
</ul>
<ul class="thous--ul">
<li class="thous--li">Alternative bullet</li>
<li class="thous--li"> Another alternative bullet </li>
</ul>Links
Links in markdown
[inline link](https://example.com)
[link with title](https://example.com "example title")
[link with title](my-little-thous)
<https://basic.link>
<email@example.com>Links in html
<a href="https://example.com" class="thous--a" target="_self">inline link</a>
<a href="my-little-thous" class="thous--a thous--a-title" target="_self" title="example title">link with title</a>
<a href="https://basic.link" class="thous--a" target="_self">https://basic.link</a>
<a class="thous--a thous--email">email@example.com</a>Images
Image in markdown
Image in html
<div class="thous--img-wrapper"><img src="https://via.placeholder.com/150x100" alt="Image Title" class="thous--img" /></div>Code
Code sample in markdown
```zig
// Zig code
const std = @import("std");
pub fn main(init: std.process.Init) !void {
std.debug.print("All your {s} are belong to us.\n", .{"codebase"});
}
```Code sample in html
<div class="thous--pre-wrapper highlight hightlight-source-zig"><pre class="thous--pre"></pre></div>
<div class="thous--pre-wrapper"><pre class="thous--pre"></pre></div>Tables
Table in markdown
| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Row 1 | Data 1 | Data 2 |
| Row 2 | Data 3 | Data 4 |
| Row 3 | Data 5 | Data 6 |Table in html
<table class="thous--table">
<thead class="thous--thead">
<tr class="thous--th-tr">
<td class="thous--th-td">Column 1</td>
<td class="thous--th-td">Column 2</td>
<td class="thous--th-td">Column 3</td>
</tr>
</thead>
<tbody class="thous--tbody">
<tr class="thous--tr">
<td class="thous--td">Row 1</td>
<td class="thous--td">Data 1</td>
<td class="thous--td">Data 2</td>
</tr>
<tr class="thous--tr">
<td class="thous--td">Row 2</td>
<td class="thous--td">Data 3</td>
<td class="thous--td">Data 4</td>
</tr>
<tr class="thous--tr">
<td class="thous--td">Row 3</td>
<td class="thous--td">Data 5</td>
<td class="thous--td">Data 6</td>
</tr>
</tbody>
</table>Blockquotes
> This is my last serenade.
> _My last Serenade_, Killswitch Engage
----<section class="thous--blockquote-wrapper">
<blockquote class="thous-blockquote">
<p class="thous--text">
This is my last serenade.<br />
<span class="thous--italic">My last Serenade</span>, Killswitch Engage
</p>
</blockquote>
</section>Horizontal Rules
Horizontal rule in markdown
***
___
---
* * *
_ _ _Horizontal rule in html
<hr class="thous--hr" />Line breaks
Line break in markdown
This line ends with two spaces
And this is a new line.
This line ends with a backslash\
And this is also a new line.
This paragraph has a manual line break.
This is a new paragraph (separated by blank line).Line break in html
<p class="thous--text">
This line ends with two spaces<br/>
And this is a new line.
</p>
<p class="thous--text">
This line ends with a backslash<br />
And this is also a new line.
</p>
<p class="thous--text">This paragraph has a manual line break.</p>
<p class="thous--text">This is a new paragraph (separated by blank line).</p>Task Lists
Chekclist on markdown
- [x] Completed task
- [x] Another completed task
- [ ] Incomplete task
- [ ] Another incomplete task
- [x] Nested completed task
- [ ] Nested incomplete taskChecklist in html
<ol class="thous--checklist-wrapper">
<li class="thous--checkilist-item">
<input type="checkbox" checked /> <span class="thous--checkilist-text">Completed Task</span>
</li>
<li class="thous--checkilist-item">
<input type="checkbox" checked /> <span class="thous--checkilist-text">Another completed task</span>
</li>
<li class="thous--checkilist-item">
<input type="checkbox" /> <span class="thous--checkilist-text">Incomplete task</span>
</li>
<li class="thous--checkilist-item">
<input type="checkbox" /> <span class="thous--checkilist-text">Another incomplete task</span>
</li>
<ol class="thous--checklist-wrapper">
<li class="thous--checkilist-item">
<input type="checkbox" checked /> <span class="thous--checkilist-text">Nested completed task</span>
</li>
<li class="thous--checkilist-item">
<input type="checkbox" /> <span class="thous--checkilist-text">Nested incomplete task</span>
</li>
</ol>
</ol>Html elements
Using html elements in markdown
You can use <em>HTML tags</em> in markdown.<strong>Bold text using HTML</strong>
<br>Line break using HTML
<details> <summary>Collapsible Section</summary>
This content is hidden by default and can be expanded by clicking the summary.
-
You can put any markdown here
-
Including lists
-
Formatted text
-
Code snippets
</details>
.Using html elements in html [source,html]
You can use <em>HTML tags</em> in markdown.
<strong>Bold text using HTML</strong>
<br>Line break using HTML
<details> <summary>Collapsible Section</summary> <p class="thous—text">This content is hidden by default and can be expanded by clicking the summary.</p> <ol class="thous—ol"> <li class="thous—li"> You can put any markdown here </li> <li class="thous—li"> Including lists </li> <li class="thous—li"> <span class="thous—bold">Formatted text</span></li> <li class="thous—li"> <span class="thous—inline-code">Code snippets</span> </li> </ol> </details>
=== Escape Characters Use backslashes to escape special characters: .Escape character in markdown [source,markdown]
*This is not italic\*
\# This is not a header
\[This is not a link\]
`This is not code\`
.Escape character in html [source,html]
<p class="thous—text">*This is not italic*</p> <p class="thous—text"># This is not a header</p> <p class="thous—text">[This is not a link]</p> <p class="thous—text">`This is not code`</p>
=== Math (Katex)
[source,markdown]
## Math (KaTeX)
Inline math: $E = mc^2$
Block math:
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
$$
\begin{align}
f(x) &= ax^2 + bx + c \\
f'(x) &= 2ax + b \\
f''(x) &= 2a
\end{align}
$$
<p class="thous--text">Inline Math:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</math>
</p>
<p class="thous--text">Block math:</p>
<p class="thous--math">
<math-renderer class="js-display-math" style="display: block" data-run-id="7d4f01ea06f2b3c03a55ac3b32dd81fc" data-catalyst="">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</math>
</math-renderer>
</p>
<p dir="auto">
<math-renderer class="js-display-math" style="display: block" data-run-id="7d4f01ea06f2b3c03a55ac3b32dd81fc" data-catalyst="">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mtable displaystyle="true" columnalign="right left" columnspacing="0em" rowspacing="3pt">
<mtr>
<mtd style="text-align: right;">
<mi>f</mi>
<mo stretchy="false">(</mo>
<mi>x</mi>
<mo stretchy="false">)</mo>
</mtd>
<mtd style="text-align: left;">
<mi></mi>
<mo>=</mo>
<mi>a</mi>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mi>b</mi>
<mi>x</mi>
<mo>+</mo>
<mi>c</mi>
</mtd>
</mtr>
<mtr>
<mtd style="text-align: right;">
<msup>
<mi>f</mi>
<mo data-mjx-alternate="1">′</mo>
</msup>
<mo stretchy="false">(</mo>
<mi>x</mi>
<mo stretchy="false">)</mo>
</mtd>
<mtd style="text-align: left;">
<mi></mi>
<mo>=</mo>
<mn>2</mn>
<mi>a</mi>
<mi>x</mi>
<mo>+</mo>
<mi>b</mi>
</mtd>
</mtr>
<mtr>
<mtd style="text-align: right;">
<msup>
<mi>f</mi>
<mo data-mjx-alternate="1">′′</mo>
</msup>
<mo stretchy="false">(</mo>
<mi>x</mi>
<mo stretchy="false">)</mo>
</mtd>
<mtd style="text-align: left;">
<mi></mi>
<mo>=</mo>
<mn>2</mn>
<mi>a</mi>
</mtd>
</mtr>
</mtable>
</math>
</math-renderer>
</p>Special characters and symbol
Html codes
© Copyright symbol
™ Trademark symbol
® Registered trademark
← Left arrow
→ Right arrow
↑ Up arrow
↓ Down arrow
----<p class="thous--text">
© Copyright symbol
™ Trademark symbol<br />
® Registered trademark
← Left arrow
→ Right arrow
↑ Up arrow
↓ Down arrow
</p>Footnotes
Here's a sentence with a footnote[^1].
Here's another footnote[^footnote-label].
You can also use inline footnotes^[This is an inline footnote].
[^1]: This is the first footnote.
[^footnote-label]: This is a longer footnote with multiple lines.
It can contain multiple paragraphs and formatting.
- Even lists
- And other elements<--> TO BE DEFINED</-->