From a0ebd3b3ff6f56d739ee058f0ff823857aeae0d7 Mon Sep 17 00:00:00 2001
From: DeltaLima <dontsendmespam@deltalima.org>
Date: Wed, 21 Jun 2023 14:07:40 +0200
Subject: [PATCH] separated javascript to res/syntaxhighlighter-ng.js, cleanup
 things

---
 plugin.syntaxhighlighter.php | 58 +++++++++---------------------------
 res/syntaxhighlighter-ng.js  | 33 ++++++++++++++++++++
 2 files changed, 47 insertions(+), 44 deletions(-)
 create mode 100644 res/syntaxhighlighter-ng.js

diff --git a/plugin.syntaxhighlighter.php b/plugin.syntaxhighlighter.php
index 2b9a90b..6591f29 100644
--- a/plugin.syntaxhighlighter.php
+++ b/plugin.syntaxhighlighter.php
@@ -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,66 +35,36 @@ 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());
   
-	$pdir=plugin_geturl('syntaxhighlighter');
+  $pdir=plugin_geturl('syntaxhighlighter');
   // javascript part
-	echo <<<PRISMBOX
-	<!-- start of prism.js footer -->
+  echo <<<PRISMBOX
+    <!-- start of prism.js footer -->
     
     <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');
 
-
-
 ?>
diff --git a/res/syntaxhighlighter-ng.js b/res/syntaxhighlighter-ng.js
new file mode 100644
index 0000000..1fc033a
--- /dev/null
+++ b/res/syntaxhighlighter-ng.js
@@ -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;
+    }
+  }
+}