adding syntax highlighter component

This commit is contained in:
sairaj mote 2024-01-12 16:23:30 +05:30
parent 968e673c59
commit 3bd8fe48b6
4 changed files with 153 additions and 1 deletions

143
components/dist/syntax-highlighter.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -23,6 +23,7 @@
<script src="dist/strip-select.js"></script>
<script src="dist/collapsed-text.js"></script>
<script src="dist/notifications.js"></script>
<script src="dist/syntax-highlighter.js"></script>
<link rel="stylesheet" href="css/main.min.css">
<style>
div {
@ -38,6 +39,13 @@
<body>
<sm-copy value="hi dhf jsbdjf sjdb"></sm-copy>
<syntax-highlighter language="html">
<sm-copy value="hi dhf jsbdjf sjdb">
<sm-button>
hi
</sm-button>
</sm-copy>
</syntax-highlighter>
</body>
<script>
let currentSubscriber = null;

View File

@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Document</title><script src=dist/select.js></script><script src=dist/form.js></script><script src=dist/popup.js></script><script src=dist/switch.js></script><script src=dist/checkbox.js></script><script src=dist/radio.js></script><script src=dist/input.js></script><script src=dist/textarea.js></script><script src=dist/text-field.js></script><script src=dist/button.js></script><script src=dist/menu.js></script><script src=dist/cube-loader.js></script><script src=dist/tags-input.js></script><script src=dist/strip-select.js></script><script src=dist/collapsed-text.js></script><script src=dist/notifications.js></script><link rel=stylesheet href=css/main.min.css><style>div{display:flex;padding:4vmax}body{overflow:auto}</style></head><body><sm-form><sm-input placeholder=fafh value="" animate required><sm-button slot=right type=submit>Submit</sm-button></sm-input><button type=submit>Submit</button></sm-form></body><script>document.querySelector("sm-input").isValid;let currentSubscriber=null;function $signal(r){let c=r;const t=new Set;return[function(){var r;return currentSubscriber&&(r=new WeakRef({func:currentSubscriber}),t.add(r)),c},function(r){if(r!==c){c=r;for(const n of t){var e=n.deref();e&&e.func()}}}]}async function $effect(r){r=(currentSubscriber=r)();try{r instanceof Promise&&await r}catch(r){console.error(r)}finally{currentSubscriber=null}}</script></html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Document</title> <script src="dist/copy.js"></script> <script src="dist/select.js"></script> <script src="dist/form.js"></script> <script src="dist/popup.js"></script> <script src="dist/switch.js"></script> <script src="dist/checkbox.js"></script> <script src="dist/radio.js"></script> <script src="dist/input.js"></script> <script src="dist/textarea.js"></script> <script src="dist/text-field.js"></script> <script src="dist/button.js"></script> <script src="dist/menu.js"></script> <script src="dist/cube-loader.js"></script> <script src="dist/tags-input.js"></script> <script src="dist/strip-select.js"></script> <script src="dist/collapsed-text.js"></script> <script src="dist/notifications.js"></script> <script src="dist/syntax-highlighter.js"></script> <link rel="stylesheet" href="css/main.min.css"> <style>div{display:flex;padding:4vmax}body{overflow:auto}</style> </head> <body> <syntax-highlighter language="html"> <sm-copy value="hi dhf jsbdjf sjdb"> <sm-button> hi </sm-button> </sm-copy> </syntax-highlighter> <script>let currentSubscriber=null;function $signal(n){let r=n;const c=new Set;return[function(){if(currentSubscriber){const n=new WeakRef({func:currentSubscriber});c.add(n)}return r},function(n){if(n!==r){r=n;for(const n of c){const r=n.deref();r&&r.func()}}}]}async function $effect(n){currentSubscriber=n;const r=n();try{r instanceof Promise&&await r}catch(n){console.error(n)}finally{currentSubscriber=null}}</script>