Updated to work with WordPress 6 and PHP 8 plus extension of styling

js/show-your-terms.js

@@ -58,6 +58,7 @@
       ref = this.container[outputTerm].children;
       for (j = 0, len = ref.length; j < len; j++) {
         element = ref[j];
+        element.innerHTML = element.innerHTML.replace(/(<([^>]+)>)/ig, "&lt;$2&gt;"); // Escape HTML tags
         this.content[outputTerm].push([
           element.getAttribute('data-action'), element.innerText, {
             styles: element.classList,
@@ -122,6 +123,7 @@
             text += content + "\n";
           }
         }
+        text=text.replace(/<[^>]*>?/gm, ''); // strip out HTML tags
         tar.value = text;
         tar.select();
         successful = document.execCommand('copy');
@@ -266,7 +268,17 @@
             currentLine.classList.add('command');
           }
         }
-        currentLine.append(content);
+        content = content.replace(/&lt;([^&]+)&gt;/ig, "<$1>"); // Unescape HTML tags
+
+        /* Append content as HTML if it contains a tag opener */
+        if (content.includes("<")) {
+          const newDiv = document.createElement("div");
+          newDiv.innerHTML = content        
+          currentLine.appendChild(newDiv); 
+        } else {
+          currentLine.append(content);
+        }
+
         fullview.append(currentLine);
       }
       this.container[outputTerm].innerHTML = fullview.innerHTML;
@@ -326,6 +338,7 @@
     ShowYourTerms.prototype.outputGenerator = function(output, outputTerm) {
       var content, counter, currentLine, options, speed, type;
       type = output[0], content = output[1], options = output[2];
+      content = content.replace(/&lt;([^&]+)&gt;/ig, "<$1>"); // Unescape HTML tags
       currentLine = document.createElement("div");
       if (options.styles) {
         currentLine.setAttribute("class", options.styles);
@@ -374,7 +387,10 @@
             };
           })(this)), speed);
         } else {
-          currentLine.appendChild(document.createTextNode(content));
+          /* Append content as HTML, not text */
+          const newDiv = document.createElement("div");
+          newDiv.innerHTML = content
+          currentLine.appendChild(newDiv);
           this.container[outputTerm].appendChild(currentLine);
           currentLine.classList.remove('active');
           return this.callNextOutput(options.delay, outputTerm);

readme.txt

@@ -23,7 +23,11 @@ symbol.
 You can also specify the color of the line using ##red## , ##blue## , ##green## or ##yellow## or even a custom
 delay for this line with ##delay=[ms]## with the amount of milliseconds to sleep.
 
-To create the effect it uses "Show Your Terms" by Kande Bofim, a tiny and library agnostic Javascript.
+More granular styling can be applied with CSS when used in conjunction with a plugin like 'Raw HTML' by Janis 
+Elsts.
+
+To create the effect it uses a slightly modified version of "Show Your Terms" by Kande Bofim, a tiny and library 
+agnostic Javascript.
 
 == Installation ==
 

simterm-core.php

@@ -19,16 +19,15 @@ function settings()
 		return $this->settings;
 	}
 
-	function simterm_shortcode($atts, $content="")
+	public function simterm_shortcode($atts, $content="")
 	{
 		$_lines = preg_split("/\r\n|\n|\r/", trim($content));
 		if (count($_lines)==0)
 			return;
-		add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
-		wp_enqueue_script('simterm-showyourterms', plugins_url('js/show-your-terms.min.js',__FILE__), array(), '20160705', true);
-		wp_enqueue_script('simterm-launcher', plugins_url('js/simterm.js',__FILE__), array('simterm-showyourterms'), '20160705', true);
-		wp_enqueue_style('simterm-showyourtermscss', plugins_url('css/show-your-terms.min.css', __FILE__), array(), '20160705', 'all');
-		wp_enqueue_style('simterm-extracss', plugins_url('css/simterm.css', __FILE__), array(), '20160705', 'all');
+		wp_enqueue_script('simterm-showyourterms', /* plugin_dir_url( __FILE__ ) . 'js/show-your-terms.min.js', */plugin_dir_url( __FILE__ ). 'js/show-your-terms.js', array(), '20160705', true);
+		wp_enqueue_script('simterm-launcher', plugin_dir_url( __FILE__ ).'js/simterm.js', array('simterm-showyourterms'), '20160705', true);
+		wp_enqueue_style ('simterm-showyourtermscss', plugin_dir_url( __FILE__ ).'css/show-your-terms.min.css', array(), '20160705','all');
+		wp_enqueue_style ('simterm-extracss', plugin_dir_url( __FILE__ ).'css/simterm.css', array(), '20160705', 'all');
 
 		$data=array('lines'=> array());
 		$commandPrep = get_option('simterm-command-prepend');
@@ -72,7 +71,7 @@ function simterm_shortcode($atts, $content="")
 				$data['lines'][$i]['delay'] = $plainOutputDelay;
 		}
 
-		return SimTermView::render('live/syt', array('data' => $data));
+		return do_shortcode(SimTermView::render('live/syt', array('data' => $data)));
 	}
 
 	function fixDashes($content)

simterm-settings.php

@@ -18,7 +18,7 @@ private function __clone()
 	{
 	}
 
-	private function __wakeup()
+	public function __wakeup()
 	{
 	}
 

simterm.php

@@ -36,22 +36,24 @@ function Init()
 		add_shortcode('simterm', array(self::$st, 'simterm_shortcode'));
 	}
 
-	public function basic_init()
+	public static function basic_init()
 	{
 		/* Nothing right here yet */
 	}
 
-	public function settingsInit()
+	public static function settingsInit()
 	{
 		$sett = self::$st->settings();
 		$sett->register();
 	}
 
-	public function load_textdomain()
+	public static function load_textdomain()
 	{
 		load_plugin_textdomain( 'simterm', FALSE, dirname( plugin_basename( __FILE__ ) ).'/languages/' );
 	}
 
 };
 
-SimTermLoader::Init();
+$simterminal = new SimTermLoader();
+$simterminal->Init();
+