pages/_includes/scripts/diff2html.liquid
George 1a7fddecf8
Fix code blocks not changing to plots and others (#2497)
For some unknown reason, all the `document.onreadystatechange = () => {`
checks stopped working. Thankfully, replacing them with
`document.addEventListener("readystatechange", () => {` fixed the
issues.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
2024-06-11 14:06:38 -03:00

31 lines
1.3 KiB
Plaintext

{% if page.code_diff %}
<!-- diff2html doesn't go well with Bootstrap Table -->
<script
src="{{ site.third_party_libraries.diff2html.url.js }}"
integrity="{{ site.third_party_libraries.diff2html.integrity.js }}"
crossorigin="anonymous"
></script>
<script>
let diff2HtmlTheme = determineComputedTheme();
/* Create diff2html as another node and hide the code block, appending the diff2html node after it
this is done to enable retrieving the code again when changing theme between light/dark */
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
document.querySelectorAll('pre>code.language-diff2html').forEach((elem) => {
const textData = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
/* create diff node */
let diffElement = document.createElement('div');
diffElement.classList.add('diff2html');
backup.after(diffElement);
const configuration = { colorScheme: diff2HtmlTheme, drawFileList: true, highlight: true, matching: 'lines' };
const diff2htmlUi = new Diff2HtmlUI(diffElement, textData, configuration);
diff2htmlUi.draw();
});
}
});
</script>
{% endif %}