DeltaLima/flatpress-plugin-syntaxhighlighter-ng
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 3 Packages Wiki Activity

separated javascript to res/syntaxhighlighter-ng.js, cleanup things

Browse source
This commit is contained in:
DeltaLima 2023-06-21 14:07:40 +02:00
parent 6f901f136f
commit a0ebd3b3ff
2 changed files with 47 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
plugin.syntaxhighlighter.php
View file

@ -1,9 +1,9 @@
<?php
/*
Plugin Name: SyntaxHighlighter-NG
Version: 1.0
Version: 1.0.1
Plugin URI: https://git.la10cy.net/DeltaLima/flatpress-plugin-syntaxhighlighter-ng
Description: <a href="https://git.la10cy.net/DeltaLima/flatpress-plugin-syntaxhighlighter-ng/">SyntaxHighlighter-NG 1.0.0</a> (forked from <a href="https://forum.flatpress.org/viewtopic.php?p=1130&hilit=syntax+highlight#p1135">Arvid's forum post</a>, using now <a href="https://prismjs.com">prism.js</a>)
Description: <a href="https://git.la10cy.net/DeltaLima/flatpress-plugin-syntaxhighlighter-ng/">SyntaxHighlighter-NG</a> (forked from <a href="https://forum.flatpress.org/viewtopic.php?p=1130&hilit=syntax+highlight#p1135">Arvid's forum post</a>, using now <a href="https://prismjs.com">prism.js</a>)
Author: 2005 NoWhereMan, 2023 DeltaLima
Author URI: https://deltalima.org
*/
@ -35,12 +35,13 @@ echo <<<PRISMJS
PRISMJS;
}
add_action('wp_head', 'plugin_syntaxhighlighter_head');
function plugin_syntaxhighlighter_foot() {
// convert the returned array into an json one, to have an easier time
// convert the returned array into a json one, to have an easier time
// giving it to the javascript below
$used_languages = json_encode(plugin_syntaxhighlighter_add());
@ -51,50 +52,19 @@ function plugin_syntaxhighlighter_foot() {
<script type="text/javascript" src="{$pdir}res/prism.full.js"></script>
<!-- wrapping the content of pre html-tags into code-tags, as said in https://prismjs.com/index.html#basic-usage -->
<!-- include wrapping-function to wrap content of pre html-tags into code-tags, as said in https://prismjs.com/index.html#basic-usage -->
<script type="text/javascript" src="{$pdir}res/syntaxhighlighter-ng.js"></script>
<!-- call wrap_pre_tags() from syntaxhighlighter-ng.js -->
<script type="text/javascript">
// wrap the content of <pre> elements into <code></code> for prismjs
// get an array of <pre></pre> elements
//var preEl = document.getElementsByTagName("pre");
// split used_languages list into array
let used_languages = $used_languages;
// iterate through all used_languages
for (let iUl = 0;iUl < used_languages.length; iUl++)
{
// handle [code] without language definition as "none"
// and we have to look for them up a bit different
if ( used_languages[iUl] == "" )
{
used_languages[iUl] == "none"
var preElements = document.querySelectorAll("pre:not([class])");
} else {
var preElements = document.querySelectorAll("pre." + used_languages[iUl]);
}
// iterate through all <pre>
for (let iEl = 0;iEl < preElements.length; iEl++)
{
org_html = preElements[iEl].innerHTML;
new_html = "<code class=\"line-numbers language-" + used_languages[iUl] + "\">" + org_html + "</code>";
preElements[iEl].innerHTML = new_html;
}
}
var used_languages = $used_languages;
wrap_pre_tags(used_languages);
</script>
<!-- end of prism.js footer -->
PRISMBOX;
}
add_action('wp_footer', 'plugin_syntaxhighlighter_foot');
?>

33
res/syntaxhighlighter-ng.js Normal file
View file

@ -0,0 +1,33 @@
// wrap the content of <pre> elements into <code></code> for prism.js
// as told mentioned in https://prismjs.com/index.html#basic-usage
// Author: DeltaLima
// Date: 21.06.2023
function wrap_pre_tags(used_languages) {
// iterate through all used_languages
for (let iUl = 0;iUl < used_languages.length; iUl++)
{
// preElements, array of <pre></pre> elements
// handle [code] without language definition as "none"
// and we have to look for them up a bit different
if ( used_languages[iUl] == "" )
{
used_languages[iUl] == "none"
var preElements = document.querySelectorAll("pre:not([class])");
} else {
var preElements = document.querySelectorAll("pre." + used_languages[iUl]);
}
// iterate through all <pre>
for (let iEl = 0;iEl < preElements.length; iEl++)
{
// put the content of <pre> tag into org_html
org_html = preElements[iEl].innerHTML;
// put <code> tag with 'language-' class and class for 'line-numbers'
// prism.js plugin around the <pre> content
new_html = "<code class=\"line-numbers language-" + used_languages[iUl] + "\">" + org_html + "</code>";
// write back our new html and enjoy syntax highlightning :)
preElements[iEl].innerHTML = new_html;
}
}
}