davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Basics, Tips and Tricks on how to use Markdown (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://ia.net/writer/support/basics/markdown-guide">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Basics, Tips and Tricks on how to use Markdown</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://ia.net/writer/support/basics/markdown-guide" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Our apps use Markdown formatting. This lets you apply basic formatting by adding a few punctuation characters. You can also use the formatting buttons in the bottom bar of your text window on OS X or the formatting keys in the Keyboard Bar of iA Writer for iOS.</p>

<h2 id="basics">Basics</h2>
<p>If you are not familiar with Markdown, it might look a little scary at first. Once you get the basics, you will quickly love it as it allows you to format your text without taking your hands off the keyboard. iA Writer’s Auto-Markdown will give you instant feedback if you got the formatting right or not.</p>
<h3 id="headings">Headings</h3>
<p>You can use up to up to six levels by writing # at the start of a line; the number of hashtags defines the hierarchy of the heading.</p>
<pre><code># First level heading
## Second level heading
### Third level heading
</code></pre>
<h3>Emphasis and Importance</h3>
<p>Emphasis (“italics”) and important (“bold”) are written by putting * or _ around the text you want to see in a different format.</p>
<ul>
<li>Emphasis: <code>*example*</code> or <code>_example_</code> (<code>⌘I</code>)</li>
<li>Importance: <code>**example**</code> or <code>__example__</code> (<code>⌘B</code>)</li>
<li>Emphasis + Importance <code>***example***</code> or <code>___example___</code></li>
</ul>
<h3>Strikethrough</h3>
<p>You can use double tildes to make <del>strikethrough</del> text:</p>
<pre><code>~~strikethrough~~</code></pre>
<h3>Highlight</h3>
<p>You can use double equals signs to <mark>highlight</mark> text:</p>
<pre><code>==highlight==</code></pre>
<h3 id="lists">Numbered Lists</h3>
<p>Type <code>1.</code> then a space. Any number (followed by a full stop and space) can be used and the list items will be ordered from 1 when exported.</p>
<pre><code>1. Ordered list item
2. Ordered list item
3. Ordered list item
</code></pre>
<h3>Bulleted Lists</h3>
<p>Type <code>*</code>, <code>-</code> or <code>+</code> then a space. Create a bulleted list by using an asterisk (*), hyphen (-), or plus sign (+), followed by a space.</p>
<pre><code>* Bulleted list item
* Bulleted list item
* Bulleted list item
</code></pre>
<h3 id="task-lists">Task Lists</h3>
<p>Type <code>-[ ]</code> or <code>1.[ ]</code> then a space. Adding an <code>x</code> between the square brackets will tick off a task list item in the Preview. iA Writer for Mac and iOS also support clicking or tapping the list item marker to toggle it.</p>
<pre><code>- [ ] Unfinished task list item
- [x] Finished task list item
</code></pre>
<h3>Nesting Lists</h3>
<p>You can nest lists several levels deep, and combine them:</p>
<pre><code>* First level
    * Second level

1. First level
    1. Second level

* First level unordered list item
    1. Second level ordered list item
</code></pre>
<p>Nested list items are indented with four spaces or a tab. iA Writer for iOS includes keys to indent and outdent list items. They can be found by tapping the <code>⌘</code> button in the keyboard bar.</p>
<h3>Blockquotes</h3>
<p>Type <code>&gt;</code> plus a space (just like email):</p>
<pre><code>&gt; A quoted paragraph
&gt;&gt; A quoted paragraph inside a quotation
</code></pre>
<p>iA Writer 5 offers a keyboard shortcut for blockquotes: <code>⌘</code>+<code>&gt;</code> These also now autocomplete in the same manner as lists.</p>
<h2 id="advanced">Advanced</h2>
<h3 id="links">Links</h3>
<p>Create a link by surrounding the link text in square brackets, followed immediately by the URL in parentheses:</p>
<pre><code>[text to link](http://example.com/)
</code></pre>
<p>You can also use reference links. Add the reference in square brackets after the text to link. Then, on a line by itself add the reference with a colon, space, and the URL:</p>
<pre><code>[text to link][ref]
…
[ref]: http://example.com/
</code></pre>
<h3 id="cross-references">Cross-References</h3>
<p><strong>iA Writer for iOS, iPadOS and macOS</strong> support cross-references using the following syntax: </p>
<pre><code># My Level 1 Header

Some text and a link to [My Level 1 Header][]. 
</code></pre>
<p>In a document where <code># My Level 1 Header</code> exists. </p>
<p>You can also use the following syntax: </p>
<pre><code># My Level 1 Header

Click here to [jump to section][My Level 1 Header]
</code></pre>
<p>You can define the label for a specific header by adding a space and <code>[Label]</code> following the header: </p>
<pre><code># My Level 1 Header [My Label]
</code></pre>
<p>This can be referenced by: </p>
<pre><code>Here is a link to [My Label][].

or 

Click here to [jump to section][My Label].
</code></pre>
<p><strong>iA Writer for Windows</strong> supports cross-referencing headers using the following syntax: </p>
<pre><code># Header

[link text][Header]
</code></pre>
<p>You can use this like so:</p>
<pre><code># My Level 1 Header

Click here to [jump to section][My Level 1 Header]. 
</code></pre>
<h3 id="images">Images</h3>
<p>Both local and web URLs are supported. Markdown uses the following syntax for images:</p>
<pre><code>![](http://example.com/image.jpg)
![](./image.jpg)    
</code></pre>
<p>When using local images, they must be in a folder added as a Library location. This gives iA Writer permission to use the file. Folders can be added as Locations by clicking the + beside the label in the Organizer on Mac, or by dragging them from Finder into the Location section. iOS supports images from any location except From Other Apps. To add a Location, tap <samp>Edit</samp> and then <samp>Add Location…</samp></p>
<p><strong>Note:</strong> Markdown image syntax and HTML image filename rules are different from Content Blocks. When using Markdown syntax, spaces must be encoded as <code>%20</code>, and the leading slash must be omitted because it refers to the root directory of a device.</p>
<h3 id="code">Code</h3>
<p>You can mark up code in-line using backticks (<code>code</code>), or add a code block by adding at least four spaces to the start of a line:</p>
<pre><code>    This is a code block
</code></pre>
<p>In iA Writer, it’s also possible to start a code block with a tab, as long as the text doesn’t start with list, header or blockquote syntax characters (<code>1.</code>, <code>*</code>, <code>-</code>, <code>+</code>, <code>#</code>, <code>&gt;</code>).</p>
<p>In addition, you can use Fenced code blocks, which begin and end with triple backticks, and don’t need indenting. <em>Note that inline formatting (like <code>_underscores_</code>) is ignored in code.</em></p>
<pre><code>```
This is a fenced code block
```
</code></pre>

<p>Add a footnote in square brackets preceded by a caret. Then add the footnote content like a reference link, for example:</p>
<pre><code>Some text with a footnote[^1].

…
[^1]: The linked footnote appears at the end of the document.
</code></pre>
<p>On Mac and iOS you can also add an inline footnote in the following manner:</p>
<pre><code>Some text with a footnote[^This is the footnote itself.].
</code></pre>
<p>Note: Markdown was designed for web where there is no concept of pagination. As such footnotes are essentially endnotes. When rendered, these are placed at the end of the document.</p>
<h3 id="toc">Table of Contents</h3>
<p>Generating a table of content is as easy as it gets. Just add <code>{{TOC}}</code> wherever you want the table of content to appear and iA Writer generates it from the Headlines you use in your text. There is a custom key for it on iOS.</p>
<p>On Mac you can add it via the toolbar or the Format Menu. The TOC will become visible and clickable in preview.</p>
<h3 id="tables">Tables</h3>
<p>To make a table, use vertical bar characters to denote cells. Start with column headers, separate with a row of cells with hyphens, then add further rows of cells. For example:</p>
<pre><code>|Header |Column 1 | Column 2 | Column 3  | 
|:--- |:---- |:----:| ----:|
|1. Row| is | is | is  |
|2. Row| left | nicely | right  |
|3. Row| aligned | centered | aligned  |  
</code></pre>
<p>Let’s be real. This is a mess. Markdown tables look more reasonable than HTML-Tables, but they are the weak point of Markdown. That being said, they still translate nicely when rendered:</p>
<p><img decoding="async" src="/wp-content/uploads/2023/05/mdtable.png" alt></p>
<p>iA Writer includes a menu option to automatically generate the cells for a table.</p>
<p>There is a trick though you can use when writing Markdown tables with a monospaced font. You can feign the correct column width by adding space characters to align the table:</p>
<p><img decoding="async" title="table.png" src="/wp-content/uploads/migration/table.png" alt="table.png"></p>
<p> In Writer for Windows you can clean up a Markdown table by selecting the whole table and using <samp>Format</samp> → <samp>Table</samp> → <samp>Reformat</samp>.</p>
<p><em>Note: If you find your table does not render correctly in Preview, please ensure Smart Dashes are turned off in <samp>Edit</samp> → <samp>Substitutions</samp>.</em></p>
<h3>Separating Paragraphs</h3>
<p>A line starting with a tab indicates a block of code. Because of this it is currently not possible to use a return-plus-tab to indicate a new paragraph in Writer. Instead, please use two returns to separate paragraphs.</p>
<h3>Line Breaks</h3>
<p>From the Markdown specification:</p>
<blockquote>When you do want to insert a <code>&lt;br /&gt;</code> break tag using Markdown, you end a line with two or more spaces, then type return.</blockquote>
<p>iA Writer also allows you to insert a <code>&lt;br /&gt;</code> into a paragraph by using Shift+Enter. This will add the spaces required at the end of the line for you.</p>
<h3>Horizontal Rules</h3>
<p>You can add a thematic break which will be represented by a dividing line (<code>&lt;hr&gt;</code>) when exported to HTML. To do so, add three or more asterisks (<code>*</code>), hyphens (<code>-</code>), or underscores (<code>_</code>) on a line by themselves, optionally separated with spaces. For example:</p>
<pre><code>* * *
</code></pre>
<p>or</p>
<pre><code>-------------
</code></pre>
<h3>Page Breaks</h3>
<p>Sometimes your document doesn’t flow exactly how you want it when printing or exporting to PDF. You can force a page break in iA Writer using three plus marks (<code>+</code>) on a line by themselves:</p>
<pre><code>+++
</code></pre>
<p><em>Note: Manual page breaks are currently unavailable in iA Writer for Android.</em></p>

<p>Markdown doesn’t have an official syntax for comments. So we don’t try to make a bespoke one that will only render correctly in iA Writer.</p>
<p>Since HTML is completely valid in Markdown, you can use HTML comments instead:</p>
<pre><code>&lt;!-- This is a comment --&gt;</code></pre>
<h3>“Escaping” Formatting Characters</h3>
<p>If you want to type a formatting character and have Writer treat it as text not formatting, type a backslash first <code>\</code>. This means <code>\*</code> gives <code>*</code>, <code>\_</code> gives <code>_</code> etc. Escaping isn’t needed in code blocks.</p>
<h3 id="math">Math</h3>
<p>iA Writer supports TeX math expressions on Mac and iOS. These are easy to write in plain text and then formatted beautifully in the Preview.
For inline expressions, use <code>$</code> or <code>\\(</code> and <code>\\)</code>:</p>
<pre><code>An example of math within a paragraph --- \\({e}^{i\pi }+1=0\\)

Or use dollar signs instead --- ${e}^{i\pi }+1=0$
</code></pre>
<p>For block format expressions, use <code>$$</code> or <code>\\[</code> and <code>\\]</code>:</p>
<pre><code>To show an expression by itself:

\\[ {x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a} \\]

or:

$${x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a}$$
</code></pre>
<p>If using the dollar sign syntax, there must be no space between the <code>$</code> and the contents of the expression and there must be space on the outside.</p>

<p>iA Writer supports metadata at the beginning of documents. You can use it store important information about your documents, hidden from Preview. Metadata must be separated from the rest of the document by three dashes:</p>
<p>You can use metadata to build correspondence Templates.</p>
<p><img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/bluth.png" alt></p>
<p>You can do this with two easy steps. First you define your metadata at the very top of your document, followed by an empty line. Let’s write “The Cat sat on the Mat” with metadata. Write:</p>
<pre><code>---
Animal: Cat 
Thing: Mat  
---
</code></pre>
<p>You can use the metadata in the text by putting it in brackets adding a % sign. Write:</p>
<pre><code>The [%Animal] sat on the [%Thing].
</code></pre>
<p>The whole document should now look like this:</p>
<pre><code>---
Animal: Cat 
Thing: Mat
---

The [%Animal] sat on the [%Thing].
</code></pre>
<p>If you open Preview and compare the raw text and the rendered Markdown you will see this:</p>
<p><img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/cat.png" alt></p>
<h2 id="smart-automation">Smart Automation</h2>
<p>Peppered throughout iA Writer’s documentation and settings you will see references to various “Smart” features. As a rule, these provide some form of automatic text completion or transformation so you can keep focused on writing instead of dealing with minutiae.</p>
<h3>Smart Lists</h3>
<p>Once you begin writing a list in iA Writer, a bullet/list marker of the same type will be created automatically when you hit return. Hitting return twice in a row removes the empty list item and exits the list so no further items will be created.</p>
<p>Blockquotes in iA Writer 5 now behave the same way.</p>
<h3>Smart Substitutions in the Editor</h3>
<p>These options are found in <samp>Preferences</samp> → <samp>Editor</samp> → <samp>Smart substitions</samp> on Mac and <samp>Settings</samp> → <samp>Editor</samp> → <samp>Text Input</samp> on iOS.</p>
<p>When <samp>Smart Copy/Paste</samp> is turned on, spaces are added around content pasted into the Editor automatically.</p>
<p>When activated, <samp>Smart Quotes</samp> will automatically replace any straight quotes written in the Editor with curly quotes, as you write. <samp>Smart Dashes</samp> works in a similar way, substituting a dash in the Editor whenever two hyphens are written consecutively.</p>
<h3>Smart Punctuation (Markdown)</h3>
<p>This option is found in <samp>Preferences</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on Mac and <samp>Settings</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on iOS.</p>
<p>When turned on, it will convert straight quotes and doubled hyphens in the typed in the Editor into curly quotes and dashes in the Preview, respectively.</p>
<p>Using this option will <em>not</em> affect text in the Editor, it only makes the change in the Preview as the Markdown is processed.</p>
<h3>Smart Tables</h3>
<p>New in iA Writer for Mac and iOS, you can use the syntax <code>=(…)</code> to perform mathematical calculations in your tables.</p>
<ul>
<li>You can also reference other cells in these calculations</li>
<li>Cell IDs start at A0 from the top-left, like in spreadsheets</li>
<li>Calculations are handled by <a href="http://mathjs.org/" rel="nofollow noopener" target="_blank">math.js</a></li>
</ul>
<table><colgroup> <col> <col> </colgroup>
<thead>
<tr>
<th>Editor Input</th>
<th>Preview Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>1</code></td>
<td>1</td>
</tr>
<tr>
<td><code>=(2 + 2)</code></td>
<td>4</td>
</tr>
<tr>
<td><code>=(51 / 3)</code></td>
<td>17</td>
</tr>
<tr>
<td><code>=(B1 + B3)</code></td>
<td>18</td>
</tr>
<tr>
<td><code>=(TOTAL)</code></td>
<td>40</td>
</tr>
</tbody>
</table>
<p>N.B. To avoid formatting and calculation errors in Smart Tables, please use spaces on either side of arithmetic operators (<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>).</p>
<p>Additionally, you can make use of metadata variables:</p>
<pre><code>---
Var: 1
---</code></pre>
<table><colgroup> <col> <col> </colgroup>
<thead>
<tr>
<th><strong>Editor Input</strong></th>
<th><strong>Preview Output</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>=([%Var] + 0)</code></td>
<td>1</td>
</tr>
<tr>
<td><code>=([%Var] + 1)</code></td>
<td>2</td>
</tr>
<tr>
<td><code>=([%Var] + 2)</code></td>
<td>3</td>
</tr>
</tbody>
</table>
<p>You can also perform unit conversion:</p>
<table><colgroup> <col> <col> </colgroup>
<thead>
<tr>
<th><strong>Editor Input</strong></th>
<th><strong>Preview Output</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>=(25 m/s to km/h)</code></td>
<td>90 km / h</td>
</tr>
<tr>
<td><code>=(2.2046226218487757 lbs to kg)</code></td>
<td>1 kg</td>
</tr>
<tr>
<td><code>=(460 V * 20 A * 30 days to kWh)</code></td>
<td>6624 kWh</td>
</tr>
</tbody>
</table>
<h2 id="preview">Preview</h2>
<p>Writer apps use Markdown formatting, so you can format your text just by typing. It’s familiar, and it’s also subtly formatted on-screen using Auto Markdown:</p>
<p><img decoding="async" src="/wp-content/uploads/migration/editor.png"></p>
<p>Writer also provides a formatted preview of your document:</p>
<h5>iA Writer for Mac</h5>
<p>Choose <samp>View</samp> → <samp>Show Preview</samp> or <kbd>⌘</kbd><kbd>R</kbd> or swipe to the left</p>
<h5>iA Writer for iPad and iPhone</h5>
<p>Tap the Preview button at the top right</p>
<h5>iA Writer for Windows</h5>
<p>Choose <samp>View</samp> → <samp>Preview</samp> or <kbd>ctrl</kbd><kbd>R</kbd></p>
<h5>iA Writer for Android</h5>
<p>Tap <span><samp>⋮</samp></span> → <samp>Preview</samp> or swipe to the left</p>
<h2 id="exporting">Exporting</h2>
<p>iA Writer supports exporting as plain text, HTML, Microsoft Word 2007 (.docx), and PDF via <samp>File</samp> → <samp>Export</samp>.</p>
<p>You can also export as PDF on Mac via either:
<samp>File</samp> → <samp>Print</samp> → <samp>PDF</samp>
<samp>File</samp> → <samp>Print Plain Text</samp> → <samp>PDF</samp></p>
<p>Finally, you can copy formatted text from Writer’s Preview to paste into other programs.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>