mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
38ef550397
Replace text labels (h1, bold, italic) with rendered HTML in the Rendu column: headings, strong, em, del, code, links, blockquote, lists, hr, sup, small
125 lines
3.7 KiB
PHP
125 lines
3.7 KiB
PHP
<?php
|
|
/**
|
|
* Markdown cheatsheet — reusable modal dialog loaded via HTMX.
|
|
* Rendered as a <dialog> element; caller should call .showModal() after swap.
|
|
*/
|
|
|
|
$rows = [
|
|
[
|
|
'syntax' => '# Titre 1',
|
|
'render' => '<h1>Titre 1</h1>',
|
|
'note' => 'Un # en début de ligne',
|
|
],
|
|
[
|
|
'syntax' => '## Titre 2',
|
|
'render' => '<h2>Titre 2</h2>',
|
|
'note' => 'Deux ## en début de ligne',
|
|
],
|
|
[
|
|
'syntax' => '### Titre 3',
|
|
'render' => '<h3>Titre 3</h3>',
|
|
'note' => 'Trois ### en début de ligne',
|
|
],
|
|
[
|
|
'syntax' => '**gras**',
|
|
'render' => '<strong>gras</strong>',
|
|
'note' => 'Double astérisque',
|
|
],
|
|
[
|
|
'syntax' => '*italique*',
|
|
'render' => '<em>italique</em>',
|
|
'note' => 'Simple astérisque',
|
|
],
|
|
[
|
|
'syntax' => '~~barré~~',
|
|
'render' => '<del>barré</del>',
|
|
'note' => 'Double tilde',
|
|
],
|
|
[
|
|
'syntax' => '`code`',
|
|
'render' => '<code>code</code>',
|
|
'note' => 'Backticks',
|
|
],
|
|
[
|
|
'syntax' => '[lien](url)',
|
|
'render' => '<a href="#" class="md-cheatsheet-link">lien</a>',
|
|
'note' => 'Texte entre crochets, URL entre parenthèses',
|
|
],
|
|
[
|
|
'syntax' => '',
|
|
'render' => '<span class="md-cheatsheet-img">🖼 image</span>',
|
|
'note' => 'Point d\'exclamation + même syntaxe que lien',
|
|
],
|
|
[
|
|
'syntax' => '> citation',
|
|
'render' => '<blockquote>citation</blockquote>',
|
|
'note' => 'Chevron > en début de ligne',
|
|
],
|
|
[
|
|
'syntax' => '- item',
|
|
'render' => '<ul><li>item</li></ul>',
|
|
'note' => 'Tiret + espace',
|
|
],
|
|
[
|
|
'syntax' => '1. item',
|
|
'render' => '<ol><li>item</li></ol>',
|
|
'note' => 'Chiffre + point + espace',
|
|
],
|
|
[
|
|
'syntax' => '---',
|
|
'render' => '<hr>',
|
|
'note' => 'Triple tiret = ligne horizontale',
|
|
],
|
|
[
|
|
'syntax' => '',
|
|
'render' => '',
|
|
'note' => '',
|
|
],
|
|
[
|
|
'syntax' => 'Texte avec [^1]',
|
|
'render' => 'Texte avec <sup>1</sup>',
|
|
'note' => 'Appel de note de bas de page',
|
|
],
|
|
[
|
|
'syntax' => '[^1]: La note.',
|
|
'render' => '<small>1. La note.</small>',
|
|
'note' => 'Définition de la note (n\'importe où dans le document)',
|
|
],
|
|
];
|
|
?>
|
|
<dialog id="md-cheatsheet-dialog" class="md-cheatsheet-dialog">
|
|
<div class="md-cheatsheet-header">
|
|
<h2>Aide Markdown</h2>
|
|
<button type="button"
|
|
class="admin-icon-btn"
|
|
onclick="this.closest('dialog').close()"
|
|
title="Fermer"
|
|
aria-label="Fermer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<table class="md-cheatsheet-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Syntaxe</th>
|
|
<th>Rendu</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($rows as $row): ?>
|
|
<?php if ($row['syntax'] === ''): ?>
|
|
<tr class="md-cheatsheet-separator"><td colspan="3"></td></tr>
|
|
<?php else: ?>
|
|
<tr>
|
|
<td class="md-cheatsheet-syntax"><code><?= htmlspecialchars($row['syntax']) ?></code></td>
|
|
<td class="md-cheatsheet-render"><?= $row['render'] ?></td>
|
|
<td class="md-cheatsheet-note"><?= htmlspecialchars($row['note']) ?></td>
|
|
</tr>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</dialog>
|