mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
feat: render actual elements in markdown cheatsheet instead of labels
Replace text labels (h1, bold, italic) with rendered HTML in the Rendu column: headings, strong, em, del, code, links, blockquote, lists, hr, sup, small
This commit is contained in:
124
app/public/admin/markdown-cheatsheet-fragment.php
Normal file
124
app/public/admin/markdown-cheatsheet-fragment.php
Normal file
@@ -0,0 +1,124 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user