{"id":397,"date":"2024-08-08T18:46:15","date_gmt":"2024-08-08T16:46:15","guid":{"rendered":"https:\/\/honadi.com\/outils\/?page_id=397"},"modified":"2024-09-26T19:13:29","modified_gmt":"2024-09-26T17:13:29","slug":"markdown-viewer","status":"publish","type":"page","link":"https:\/\/honadi.com\/outils\/markdown-viewer\/","title":{"rendered":"Markdown Viewer"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Visualiseur Markdown avanc\u00e9<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/marked\/4.0.2\/marked.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mermaid\/8.14.0\/mermaid.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/abcjs\/6.0.0\/abcjs-basic-min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjax\/3.2.0\/es5\/tex-mml-chtml.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.2\/codemirror.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.2\/mode\/markdown\/markdown.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.2\/codemirror.min.css\">\n <style>\n #markdown-editor-app {\n font-family: Arial, sans-serif;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n .container {\n display: flex;\n gap: 20px;\n margin-top: 10px;\n }\n #editor, #output {\n width: 50%;\n height: 500px;\n border: 1px solid #A0616A;\n border-radius: 5px;\n }\n #output {\n background-color: #FFFFFF;\n overflow-y: auto;\n padding: 10px;\n }\n .controls, .toolbar {\n margin-bottom: 10px;\n }\n .controls button, .toolbar button {\n margin-right: 5px;\n padding: 5px 10px;\n background-color: #F9B200;\n border: none;\n border-radius: 3px;\n color: #030E41;\n cursor: pointer;\n }\n .controls button:hover, .toolbar button:hover {\n background-color: #ffca28;\n }\n .dark-theme {\n background-color: #030E41;\n color: #FFFFFF;\n }\n .dark-theme #output {\n background-color: #1a1a2e;\n color: #FFFFFF;\n border-color: #F9B200;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"markdown-editor-app\">\n <div class=\"controls\">\n <select id=\"theme-selector\">\n <option value=\"light\">Th\u00e8me clair<\/option>\n <option value=\"dark\">Th\u00e8me sombre<\/option>\n <\/select>\n <button id=\"fullscreen-btn\">Plein \u00e9cran<\/button>\n <button id=\"download-md\">T\u00e9l\u00e9charger Markdown<\/button>\n <button id=\"download-html\">T\u00e9l\u00e9charger HTML<\/button>\n <button id=\"download-pdf\">T\u00e9l\u00e9charger PDF<\/button>\n <button id=\"undo\">Annuler<\/button>\n <button id=\"redo\">R\u00e9tablir<\/button>\n <\/div>\n <div class=\"toolbar\">\n <button data-md=\"# \">H1<\/button>\n <button data-md=\"## \">H2<\/button>\n <button data-md=\"### \">H3<\/button>\n <button data-md=\"**\">Gras<\/button>\n <button data-md=\"*\">Italique<\/button>\n <button data-md=\"[](url)\">Lien<\/button>\n <button data-md=\"![](url)\">Image<\/button>\n <button data-md=\"- \">Liste<\/button>\n <button data-md=\"1. \">Liste num\u00e9rot\u00e9e<\/button>\n <button data-md=\"> \">Citation<\/button>\n <button data-md=\"```\">Code<\/button>\n <\/div>\n <div class=\"container\">\n <div id=\"editor\"><\/div>\n <div id=\"output\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const output = document.getElementById('output');\n const themeSelector = document.getElementById('theme-selector');\n const fullscreenBtn = document.getElementById('fullscreen-btn');\n const downloadMdBtn = document.getElementById('download-md');\n const downloadHtmlBtn = document.getElementById('download-html');\n const downloadPdfBtn = document.getElementById('download-pdf');\n const undoBtn = document.getElementById('undo');\n const redoBtn = document.getElementById('redo');\n\n \/\/ Initialisation de CodeMirror\n const editor = CodeMirror(document.getElementById('editor'), {\n mode: 'markdown',\n lineNumbers: true,\n lineWrapping: true,\n theme: 'default'\n });\n\n \/\/ Configuration de marked\n const renderer = new marked.Renderer();\n renderer.code = function(code, language) {\n if (language === 'mermaid') {\n return '<div class=\"mermaid\">' + code + '<\/div>';\n } else if (language === 'abc') {\n return '<div class=\"abc\">' + code + '<\/div>';\n }\n return '<pre><code>' + code + '<\/code><\/pre>';\n };\n marked.setOptions({ renderer: renderer, breaks: true, gfm: true });\n\n function updateOutput() {\n let html = marked.parse(editor.getValue());\n output.innerHTML = html;\n mermaid.init(undefined, document.querySelectorAll('.mermaid'));\n document.querySelectorAll('.abc').forEach((el, i) => {\n ABCJS.renderAbc(el, el.textContent, { responsive: 'resize' });\n });\n MathJax.typeset();\n localStorage.setItem('markdownContent', editor.getValue());\n }\n\n editor.on('change', updateOutput);\n\n \/\/ Gestion des th\u00e8mes\n themeSelector.addEventListener('change', (e) => {\n const isDark = e.target.value === 'dark';\n document.body.classList.toggle('dark-theme', isDark);\n editor.setOption('theme', isDark ? 'monokai' : 'default');\n });\n\n \/\/ Mode plein \u00e9cran\n fullscreenBtn.addEventListener('click', () => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n });\n\n \/\/ T\u00e9l\u00e9chargements\n downloadMdBtn.addEventListener('click', () => downloadFile(editor.getValue(), 'document.md', 'text\/markdown'));\n downloadHtmlBtn.addEventListener('click', () => downloadFile(output.innerHTML, 'document.html', 'text\/html'));\n downloadPdfBtn.addEventListener('click', () => {\n html2canvas(output).then(canvas => {\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jspdf.jsPDF();\n pdf.addImage(imgData, 'PNG', 0, 0);\n pdf.save(\"document.pdf\");\n });\n });\n\n function downloadFile(content, filename, contentType) {\n const blob = new Blob([content], {type: contentType});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.click();\n }\n\n \/\/ Drag and drop\n editor.on('dragover', (editor, e) => {\n e.preventDefault();\n e.stopPropagation();\n });\n\n editor.on('drop', (editor, e) => {\n e.preventDefault();\n e.stopPropagation();\n const file = e.dataTransfer.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n editor.setValue(e.target.result);\n updateOutput();\n };\n reader.readAsText(file);\n }\n });\n\n \/\/ Charger le contenu sauvegard\u00e9 ou l'exemple\n const savedContent = localStorage.getItem('markdownContent');\n editor.setValue(savedContent || `# Bienvenue dans le visualiseur Markdown ! \ud83c\udf89\n\n## Fonctionnalit\u00e9s support\u00e9es :\n\n1. Diagrammes Mermaid\n\n\\`\\`\\`mermaid\ngraph TD\n A[D\u00e9but] --> B{D\u00e9cision}\n B -->|Oui| C[OK]\n B -->|Non| D[Retour]\n\\`\\`\\`\n\n2. Partitions musicales ABC\n\n\\`\\`\\`abc\nX:1\nT:Example\nM:4\/4\nL:1\/8\nK:G\n|:Gc BA G2 Bd|]\n\\`\\`\\`\n\n3. \u00c9quations LaTeX\n\n$$ E = mc^2 $$\n\n4. Tableaux et listes\n\n| Colonne 1 | Colonne 2 |\n|-----------|-----------|\n| A1 | B1 |\n| A2 | B2 |\n\n- Item 1\n- Item 2\n - Sous-item 2.1\n - Sous-item 2.2\n- Item 3\n\n1. Premier\n2. Deuxi\u00e8me\n3. Troisi\u00e8me\n`);\n updateOutput();\n\n \/\/ Gestion de l'historique\n let history = [];\n let historyIndex = -1;\n\n function saveState() {\n historyIndex++;\n history = history.slice(0, historyIndex);\n history.push(editor.getValue());\n }\n\n editor.on('change', saveState);\n\n undoBtn.addEventListener('click', () => {\n if (historyIndex > 0) {\n historyIndex--;\n editor.setValue(history[historyIndex]);\n editor.clearHistory();\n }\n });\n\n redoBtn.addEventListener('click', () => {\n if (historyIndex < history.length - 1) {\n historyIndex++;\n editor.setValue(history[historyIndex]);\n editor.clearHistory();\n }\n });\n\n \/\/ Barre d'outils WYSIWYG\n document.querySelectorAll('.toolbar button').forEach(button => {\n button.addEventListener('click', () => {\n const markdown = button.getAttribute('data-md');\n const doc = editor.getDoc();\n const cursor = doc.getCursor();\n const selection = doc.getSelection();\n\n if (selection) {\n doc.replaceSelection(markdown + selection + markdown);\n } else {\n doc.replaceRange(markdown, cursor);\n }\n\n editor.focus();\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Visualiseur Markdown avanc\u00e9 Th\u00e8me clairTh\u00e8me sombre Plein \u00e9cran T\u00e9l\u00e9charger Markdown T\u00e9l\u00e9charger HTML T\u00e9l\u00e9charger PDF Annuler R\u00e9tablir H1 H2 H3 Gras Italique Lien Image Liste Liste num\u00e9rot\u00e9e<\/p>\n","protected":false},"author":1,"featured_media":2776,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-397","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/pages\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":22,"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/pages\/397\/revisions"}],"predecessor-version":[{"id":427,"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/pages\/397\/revisions\/427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/media\/2776"}],"wp:attachment":[{"href":"https:\/\/honadi.com\/outils\/wp-json\/wp\/v2\/media?parent=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}