Play button for js code

Author: slowcheetah

web/src/js/hljs-run.js

@@ -0,0 +1,26 @@
+export default class RunButtonPlugin {
+  constructor() {
+    this.playgroundUrl = '/playground.html';
+    this.text = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">' +
+      '<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />' +
+      '</svg>'
+  }
+
+  'after:highlightElement'({ el, result, text }) {
+    if (result.language !== 'js') return;
+    if (el.parentElement.querySelector(".hljs-run-button")) return;
+    const runButton = document.createElement("a");
+    runButton.href = '#';
+    runButton.innerHTML = this.text;
+    runButton.classList.add("hljs-run-button");
+    runButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      const hash = encodeURIComponent(text);
+      window.location.href = `.${this.playgroundUrl}?hash=${hash}`;
+    });
+    const wrapper = document.createElement("div");
+    wrapper.classList.add('hljs-run');
+    wrapper.appendChild(runButton);
+    el.appendChild(wrapper);
+  }
+}

web/src/js/main.js

@@ -4,6 +4,7 @@ import javascript from 'highlight.js/lib/languages/javascript';
 import typescript from 'highlight.js/lib/languages/typescript';
 import json from 'highlight.js/lib/languages/json';
 import bash from 'highlight.js/lib/languages/bash';
+import RunButtonPlugin from './hljs-run.js';
 
 hljs.registerLanguage('js', javascript);
 hljs.registerLanguage('ts', typescript);
@@ -54,5 +55,6 @@ document.addEventListener('DOMContentLoaded', function(_event) {
     this.parentElement.classList.remove('active');
   })
 
+  hljs.addPlugin(new RunButtonPlugin());
   hljs.highlightAll();
 });

web/src/scss/parts/code.scss

@@ -1,4 +1,5 @@
 @use '../includes/variables' as *;
+@use '../includes/theme' as *;
 
 .hljs {
   display: block;
@@ -98,6 +99,7 @@
 }
 
 code {
+  position: relative;
   background: $selection;
   padding: 0 0.25rem;
 }
@@ -108,3 +110,17 @@ pre code {
   font-size: 0.85rem;
   line-height: 1.375rem;
 }
+
+.hljs-run {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 24px;
+  height: 24px;
+
+  .hljs-run-button {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}