FartLabs / fart

🌫 Program that generates type definitions in multiple languages.
https://fart.fart.tools
MIT License
1 stars 0 forks source link

Create HTML registry with syntax highlighting cartridge #26

Open EthanThatOneKid opened 3 years ago

EthanThatOneKid commented 3 years ago

What is this registry?

This registry holds cartridges that generate HTML from the given source Fart.

html.syntax.gh cartridge

a.k.a. html.syntax or html.syntax.default

Example in URL format: https://fart.deno.dev/html.syntax/EthanThatOneKid/fart/main/ex/pokemon/mod.html

This cartridge would just return the source Fart, but annotated with HTML tags that contain the appropriate CSS classes. The .gh at the end determines which CSS classes are used to represent the syntax highlighting. By default, the highlighter uses the GitHub highlighting pattern. An example is shown below from https://etok.codes/acmcsuf.com/blob/main/src/client.ts:

<tbody><tr>
        <td id="L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="LC1" class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">sapper</span> <span class="pl-k">from</span> <span class="pl-s">"@sapper/app"</span><span class="pl-kos">;</span></td>
      </tr>
      <tr>
        <td id="L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="LC2" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="LC3" class="blob-code blob-code-inner js-file-line"><span class="pl-s1">sapper</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">{</span></td>
      </tr>
      <tr>
        <td id="L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="LC4" class="blob-code blob-code-inner js-file-line">  <span class="pl-c1">target</span>: <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"#sapper"</span><span class="pl-kos">)</span><span class="pl-kos">,</span></td>
      </tr>
      <tr>
        <td id="L5" class="blob-num js-line-number" data-line-number="5"></td>
        <td id="LC5" class="blob-code blob-code-inner js-file-line"><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></td>
      </tr>
</tbody>
EthanThatOneKid commented 3 years ago

The core algorithm needed is the ability to "pretty print" (a.k.a. format; fmt for short) Fart code. This feature can use shared logic to accomplish the HTML highlighting idea.