Let me test the syntax highlighter!
function wrapCodeBlocks(content) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
const codeBlockContainers = tempDiv.querySelectorAll('.ql-code-block-container');
codeBlockContainers.forEach(container => {
const preElement = document.createElement('pre');
const codeElement = document.createElement('code');
// Add Prism.js classes for syntax highlighting and line numbers
preElement.classList.add('line-numbers');
codeElement.classList.add('language-javascript'); // Change language as needed
// Move each line of code from div.ql-code-block to the code tag
container.querySelectorAll('.ql-code-block').forEach(codeLine => {
codeElement.textContent += codeLine.textContent + '\n';
});
preElement.appendChild(codeElement);
// Replace the container with the new pre/code block
container.replaceWith(preElement);
});
// Trigger Prism.js highlighting
Prism.highlightAll();
test();
return tempDiv.innerHTML;
}
Done!
Let me test as well!
function wrapCodeBlocks(content) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
const codeBlockContainers = tempDiv.querySelectorAll('.ql-code-block-container');
codeBlockContainers.forEach(container => {
const preElement = document.createElement('pre');
const codeElement = document.createElement('code');
// Add Prism.js classes for syntax highlighting and line numbers
preElement.classList.add('line-numbers');
codeElement.classList.add('language-javascript'); // Change language as needed
// Move each line of code from div.ql-code-block to the code tag
container.querySelectorAll('.ql-code-block').forEach(codeLine => {
codeElement.textContent += codeLine.textContent + '\n';
});
preElement.appendChild(codeElement);
// Replace the container with the new pre/code block
container.replaceWith(preElement);
});
// Trigger Prism.js highlighting
Prism.highlightAll();
return tempDiv.innerHTML;
}
01 October, 2024
hi there
// Trigger Prism.js highlighting
Prism.highlightAll();
return tempDiv.innerHTML;
Mohammed Imtiyaz testing comment notification!
Mohammed Imtiyaz testing mention!
0
Mohammed Imtiyaz
01 October, 2024
Good Job!
Mohammed Imtiyaz
01 October, 2024
Mohammed Imtiyaz
01 October, 2024
Lets do it again.