m |
m (backticks) |
||
| Line 13: | Line 13: | ||
} | } | ||
} | } | ||
| + | /* ----------------------------- */ | ||
| + | /* Custom Script for Highlighting Backticks */ | ||
| + | /* Applies custom visual styles to text wrapped in backticks without altering the content */ | ||
| + | /* ----------------------------- */ | ||
| + | |||
| + | // This script waits for the document to fully load, and applies a visual style | ||
| + | // to any text that is surrounded by backticks (` `), without altering the content. | ||
| + | |||
| + | document.addEventListener('DOMContentLoaded', function () { | ||
| + | // Check if we are in edit mode (to avoid changing the editor content) | ||
| + | if (document.querySelector('#wpTextbox1') !== null) { | ||
| + | return; // Do nothing in edit mode | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Function to highlight text between backticks by wrapping it in a span element | ||
| + | * @param {string} text | ||
| + | * @returns {string} | ||
| + | */ | ||
| + | function highlightBackticks(text) { | ||
| + | const backtickRegex = /`([^`]+)`/g; // Matches text between backticks | ||
| + | const styledText = text.replace(backtickRegex, function (match, p1) { | ||
| + | return '<span class="backtick-style">' + p1 + '</span>'; | ||
| + | }); | ||
| + | return styledText; | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Traverse all text nodes and apply the backtick highlighting | ||
| + | * @param {Node} node | ||
| + | */ | ||
| + | function traverseTextNodes(node) { | ||
| + | if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes | ||
| + | const span = document.createElement('span'); | ||
| + | span.innerHTML = highlightBackticks(node.nodeValue); | ||
| + | node.parentNode.replaceChild(span, node); | ||
| + | } else if (node.nodeType === 1 && node.childNodes) { // Traverse element children | ||
| + | node.childNodes.forEach(traverseTextNodes); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // Apply the changes to the entire body | ||
| + | traverseTextNodes(document.body); | ||
| + | }); | ||
| + | |||
| + | console.log('Backtick script loaded'); | ||
// Charger le module collapsible de MediaWiki pour rendre la section repliable. mw.loader.load('mediawiki.collapsible'); // Cette fonction affiche ou masque un élément avec l'ID spécifié. // Si l'élément est masqué ('none' ou vide), il est affiché en tant que 'table-row-group'. // Sinon, il est masqué. function toggleContent(id) { var element = document.getElementById(id); if (element.style.display === 'none' || element.style.display === '') { element.style.display = 'table-row-group'; } else { element.style.display = 'none'; } } /* ----------------------------- */ /* Custom Script for Highlighting Backticks */ /* Applies custom visual styles to text wrapped in backticks without altering the content */ /* ----------------------------- */ // This script waits for the document to fully load, and applies a visual style // to any text that is surrounded by backticks (` `), without altering the content. document.addEventListener('DOMContentLoaded', function () { // Check if we are in edit mode (to avoid changing the editor content) if (document.querySelector('#wpTextbox1') !== null) { return; // Do nothing in edit mode } /** * Function to highlight text between backticks by wrapping it in a span element * @param {string} text * @returns {string} */ function highlightBackticks(text) { const backtickRegex = /`([^`]+)`/g; // Matches text between backticks const styledText = text.replace(backtickRegex, function (match, p1) { return '<span class="backtick-style">' + p1 + '</span>'; }); return styledText; } /** * Traverse all text nodes and apply the backtick highlighting * @param {Node} node */ function traverseTextNodes(node) { if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes const span = document.createElement('span'); span.innerHTML = highlightBackticks(node.nodeValue); node.parentNode.replaceChild(span, node); } else if (node.nodeType === 1 && node.childNodes) { // Traverse element children node.childNodes.forEach(traverseTextNodes); } } // Apply the changes to the entire body traverseTextNodes(document.body); }); console.log('Backtick script loaded');