simple-syntax-highlighter/dist/sshpre.umd.js

No chi-chi syntax highlighter for Vue.js 3 (and 2).

(function(u,f){typeof exports=="object"&&typeof module<"u"?module.exports=f(require("vue")):typeof define=="function"&&define.amd?define(["vue"],f):(u=typeof globalThis<"u"?globalThis:u||self,u.sshpre=f(u.Vue))})(this,function(u){"use strict";const f=["data-type","data-label"],C=["contenteditable","innerHTML"];return{__name:"simple-syntax-highlighter",props:{language:{type:String,default:""},label:{type:[String,Boolean],default:!1},tab:{type:[Boolean,String],default:"  "},dark:{type:Boolean,default:!1},copyButton:{type:Boolean,default:!1},editable:{type:Boolean,default:!1}},emits:["copied"],setup(h,{emit:R}){const o={quote:/("(?:\\"|[^"])*")|('(?:\\'|[^'])*')/,comment:/(\/\/.*?(?:\n|$)|\/\*.*?(?:\*\/|$))/,doctype:/(&lt;!DOCTYPE.*?&gt;)/,htmlTag:/&lt;(?:([a-z][\w:-]*)((?:[\w\- ]+=(?:"[^"]*"|'[^']*'))*|(?:[^&]|&(?:lt|amp|quot|apos|gt);)*?)(\s*\/?)|(\/?)([a-z][\w:-]*))&gt;/,htmlentity:/(&amp;(?:[a-z]+|#x?\d+);)/,punctuation:new RegExp("(!==?|(?:[[\\](){}.:,+\\-?=!])+|(?<!&(?:[a-z]+|#x?\\d+));|\\|\\||&lt;|&gt;|&amp;)"),number:/(-?(?:\.\d+|\d+(?:\.\d+)?))/,boolean:/\b(true|false)\b/},y={shell:{quote:o.quote,comment:/(#.*?)(?:\n|$)/,keyword:/\b(p?npm|yarn|i(?:nstall)?|run|audit|outdated|update|publish|whoami|cd|sudo|chmod|chown|ls|cat|vim?|scp|rm|mv|mkdir|ln|open|cwd|which|clear|curl|ping|systemctl|echo|export|open|bash|exit)\b/,param:/( --(?:save|save-dev))(?:\s|$)/},xml:{doctype:o.doctype,quote:o.quote,comment:/(&lt;!--.*?(?:--&gt;|$))/,htmlentity:o.htmlentity,tag:o.htmlTag},html:{doctype:o.doctype,quote:o.quote,comment:/(&lt;!--.*?(?:--&gt;|$))/,htmlentity:o.htmlentity,tag:o.htmlTag},"html-vue":{doctype:o.doctype,quote:o.quote,comment:/(&lt;!--.*?(?:--&gt;|$))/,htmlentity:o.htmlentity,tag:/&lt;(?:([a-z][\w:-]*)((?:[\w-]+\s*=(?:"[^"]*"|'[^']*'))*|(?:[^&]|&(?:lt|amp|quot|apos|gt);)*?)(\s*\/?)|(\/?)([a-z][\w:-]*))&gt;/},pug:{text:/((?:^|\n)[ \t]*|^)\|([ \t]*)([^\n]+(?=\s*(?:\n|$)))/,text2:/([ \t]*)([.#\w-]+(?:\([^)]*\))*)\.\n((?:\n+(?=\4[ \t]+)|(?=\4[ \t]+).+?(?:\n|$)*?)*)(?=\s*(?:\n|$))/,quote:o.quote,comment:/(^|\n)([ \t]*|^)(\/\/-[ \t]*(?:[^\n]*?(?:\n\10[ \t]+[^\n]*)+|[^\n]+(?=\n|$)))/,tag:/([a-z][\w:-]*|)([.#][a-z][.\w-]*|)\b(?:\((\s*(?:[#@:]?[a-z][\w-.:]+(?:=(?:"[^"]*"|'[^']*'))*\s*)*)\))?(\.?)([ \t]*)([^\n]+)?(?=\n|$)/,"inline-tag":/#\[([^[\]]+)\]/},css:{comment:/(\/\*.+?(?:\*\/|$))/,quote:/("(?:\\"|[^"])*")|('(?:\\'|[^'])*')/,pseudo:/(:(?:hover|active|focus|visited|not|before|after|(?:first|last|nth)-child))/,"selector keyword vendor":/(@-(?:moz|o|webkit|ms)-(?=keyframes\s))/,"selector keyword":/((?:@(?:import|media|font-face|keyframes)|screen|print|and)(?=[\s({])|keyframes|\s(?:ul|ol|li|table|div|pre|p|a|img|br|hr|h[1-6]|em|strong|span|html|body|iframe|video|audio|input|button|form|label|fieldset|small|abbr|i|dd|dt)\b)(?=.*\{})/,variable:/(--[a-z0-9-]+)/,selector:/((?:[.#-\w*+ >:,[\]="~\n]|&gt;)+)(?=\s*\{)/,"attribute keyword vendor":/(-(?:moz|o|webkit|ms)-(?=transform|transition|user-select|tap-highlight-color|animation|background-size|box-shadow))/,"attribute keyword":/\b(content|float|display|position|top|left|right|bottom|(?:(?:max|min)-)?width|(?:(?:max|min|line)-)?height|font(?:-(?:family|style|size|weight|variant|stretch))?|vertical-align|color|opacity|visibility|z-index|pointer-events|user-select|transform(?:-(?:origin|style|delay|duration|property|timing-function))?|transition(?:-(?:delay|duration))?|animation(?:-(?:name|delay|duration|direction|fill-mode))?|backface-visibility|backdrop-filter|background(?:-(?:color|position|image|repeat|size|attachment|origin|clip|blend-mode))?|(?:padding|margin|border)(?:-(?:top|left|right|bottom))?|border(?:-(?:radius|color|width|style|spacing))|white-space|text-(?:align|transform|decoration|shadow|indent)|overflow(?:-(?:x|y))?|(?:letter|word)-spacing|word-break|box-(?:sizing|shadow)|stroke(?:-(?:width|opacity|dasharray|dashoffset|linecap|linejoin))?|fill|speak|outline|user-select|cursor|flex(?:-(?:direction|flow|grow|shrink|basis|wrap))?|(?:justify|align)-(?:content|self|items))(?=\s*:)/,"value keyword vendor":/(-(?:moz|o|webkit|ms)-(?=linear-gradient))/,"value keyword":/\b(inherit|initial|normal|none|unset|auto|inline(?:-(?:block|flex))?|block|flex|absolute|relative|static|fixed|sticky|hidden|visible|top|left|right|bottom|center|middle|baseline|solid|dotted|dashed|line-through|(?:over|under)line|wavy|double|(?:pre-|no)?wrap|pre|break-word|(?:upper|lower)case|capitalize|italic|bold|attr\(.*?\)|linear|ease(?:-in)?(?:-out)?|all|infinite|cubic-bezier|(?:translate|rotate)(?:[X-Z]|3d)?|skew[XY]?|scale|(?:no-)?repeat|repeat(?:-x|-y)|contain|cover|url|(?:repeating-)?(?:linear|radial)-gradient|inset|pointer|(?:flex-)?(?:start|end)|space-(?:between|evenly|around)|stretch|revert|row(?:-reverse)?|column(?:-reverse)?)(?=\s*[,;}(]|\s+[\da-z!])/,"value keyword important":/( ?!important)/,number:o.number,color:/(transparent|#(?:[\da-f]{8}|[\da-f]{6}|[\da-f]{3})|rgba?\([\d., ]*\))/,htmlentity:o.htmlentity,punctuation:/([:,;{}@#()!]+)/,attribute:/([a-z-]+)(?=\s*:)/,unit:/(px|pt|cm|%|r?em|m?s|deg|vh|vw|vmin|vmax)(?=(?:\s*[;,{}})]|\s+[-\da-z#]))/,error:/([:,;{}@#()!]+|&lt;|&gt;|&amp;)/},json:{quote:/("(?:\\"|[^"])*")/,number:o.number,boolean:o.boolean,punctuation:/([[\](){}:,]+)/,error:/(&(:?lt|gt|amp);|(?!\s).)/},js:{quote:o.quote,comment:o.comment,number:/\b(\d+(?:\.\d+)?|null)\b/,boolean:o.boolean,this:/\b(this)(?=\W)/,keyword:/\b(new|getElementsBy(?:Tag|Class|)Name|getElementById|querySelector|querySelectorAll|arguments|if|else|do|return|case|default|(?:f|F)unction|typeof|instanceof|undefined|document(?:Element)?|window|console|while|for|forEach|switch|in|break|continue|delete|length|var|let|const|export|import|as|require|from|Class|constructor|Number|Boolean|String|Array|Object|RegExp|Integer|Date|Promise|Proxy|WeakMap|WeakSet|Symbol|SyncManager|File(?:Reader)?|DataTransfer|DocumentFragment|async|await|(?:clear|set)(?:Timeout|Interval)|parse(?:Int|Float)|Math(?=\.)|isNaN|atob|btoa|getComputedStyle)(?=\W)/,htmlentity:o.htmlentity,punctuation:/(!==?|[[\]!(){}:;,+\-%*/?=]+|\.+(?![a-z])|\|\||&lt;|&gt;|&amp;)/,variable:/(\.?[a-z_]\w*)/,"external-var":/(\$|jQuery|JSON)(?=\W|$)/},php:{quote:o.quote,comment:o.comment,special:/(&lt;\?(?:php)?|\?&gt;|__(?:DIR|FILE|LINE|CLASS|METHOD|FUNCTION|NAMESPACE|TRAIT)__)/,punctuation:o.punctuation,number:o.number,boolean:o.boolean,variable:/(\$\w+)/,keyword:/\b(define|echo|die|exit|print_r|var_dump|if|else|elseif|do|return|case|default|function|\$this|while|foreach|for|switch|in|break|continue|empty|isset|unset|parse_ini_file|session_(?:start|destroy|id)|header|json_(?:encode|decode)|error_log|(require|include)(:?_once)?|try|throw|new|Exception|catch|finally|preg_(?:match|replace)|list|strlen|substr|str_replace|array_(?:keys|values))(?=\W|$)/},sql:{quote:o.quote,comment:/((?:--|#)\s.*?(?:\n|$)|\/\*.*?\*\/)/,punctuation:o.punctuation,number:/\b(\d+(?:\.\d+)?|null)\b/,boolean:o.boolean,keyword:/\b(\*|DECLARE|BEGIN|END|RETURNS|FUNCTION|CREATE|DATABASE|TABLE|VIEW|COLUMN|INDEX|GRANT|REVOKE|ALL|PRIVILEGES|IDENTIFIED|FLUSH|ALTER|MODIFY|DROP|TRUNCATE|CONSTRAINT|ADD|CHECK|(?:(?:PRIMARY|FOREIGN|UNIQUE) )?KEY|REFERENCES|AUTO_INCREMENT|COMMENT|DEFAULT|UNSIGNED|CHARSET|COLLATE|CHARACTER|ENGINE|SQL_MODE|USE|IF|THEN|NULL|EXISTS|UNIQUE|SELECT|UPDATE|DELETE|(?:INSERT|REPLACE)(?: INTO)?|VALUES|SET|FROM|WHERE|(?:ORDER|GROUP) BY|LIMIT|(?:(?:LEFT|RIGHT|INNER|OUTER|CROSS) |)JOIN|AS|ON|COUNT|AVG|SUM|MIN|MAX|CASE|TO|WHEN|BETWEEN|AND|OR|NOT|IN|LIKE|IS|CONCAT|SUBSTRING|CURRENT_(?:DATE|TIMESTAMP)|USING|HAVING?)(?=\W|$)/,"var-type":/\b((?:var)?char|(?:tiny|small|medium|big)?int|decimal|float|double|real|bit|boolean|date(?:time)?|time(?:stamp)?|year|(?:tiny|medium|long)?(?:text|blob)|enum)\b/}},T={xml:/(\s*)([a-z\d\-:]+)(?:=("|')(.*?)\3)?/g,html:/(\s*)([a-z-]+)(?:=("|')(.*?)\3)?/gs,"html-vue":/(\s*)([@:#]?[a-z\d-]+)(?:(?:=("|')(.*?)\3)|)/gs,pug:/(\s*|,)([@:#]?[a-z\d-]+)(?:(?:=("|')(.*?)\3)|)/g},A={shell:{quote:2},xml:{quote:2,tag:5},html:{quote:2,tag:5},"html-vue":{quote:2,tag:5},pug:{text:3,text2:3,quote:2,comment:3,tag:6},json:{},php:{quote:2},sql:{quote:2},css:{quote:2},js:{quote:2}},d=h,q=R,N=u.ref(Object.keys(y)),b=u.ref(null),I=u.useSlots(),w=t=>t.map(e=>{if(!e.children||typeof e.children=="string")return e.children||"";if(Array.isArray(e.children))return w(e.children);if(e.children.default)return w(e.children.default())}).join(""),E=t=>t.replace(/[<>]/g,e=>({"<":"&lt;",">":"&gt;"})[e]),L=t=>{if(t==="transparent")return{dark:!1,alpha:0};const e=s=>s<=.03928?s/12.92:Math.pow((s+.055)/1.055,2.4);let l=0,c=0,n=0,a=1;const i=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/),r=t.match(/^#([\da-f]{3,8})$/i);if(i)l=parseInt(i[1])/255,c=parseInt(i[2])/255,n=parseInt(i[3])/255,i[4]&&(a=parseFloat(i[4]));else if(r){const s=r[1],p=s.length===3||s.length===4;l=parseInt(p?s[0]+s[0]:s.substring(0,2),16)/255,c=parseInt(p?s[1]+s[1]:s.substring(2,4),16)/255,n=parseInt(p?s[2]+s[2]:s.substring(4,6),16)/255,(s.length===4||s.length===8)&&(a=parseInt(p?s[3]+s[3]:s.substring(6,8),16)/255)}const m=.2126*e(l)+.7152*e(c)+.0722*e(n);return{dark:a*m+(1-a)*1<=.45,alpha:a}},O=()=>{let t="";const e=[];for(const l in y[d.language]){const c=A[d.language][l]||1;for(let n=0;n<c;n++)e.push(l);t+=(t?"|":"")+y[d.language][l].source}return[t,e]},k=t=>{const e=(l,c,n,a,i)=>`${c}<span class="attribute">${n}</span>`+(a||i?'<span class="punctuation">=</span>':"")+(a||i?`<span class="quote">${a||""}${i||""}${a||""}</span>`:"");if(d.language==="pug"){let[l,c="",n="",a="",i="",r=""]=t;return c=c.replace(/#[\w-]+/g,m=>`<span class="id">${m}</span>`).replace(/\.[\w-]+/g,m=>`<span class="class">${m}</span>`),n&&(n=n.replace(T.pug,e),n='<span class="punctuation">(</span>'+n+'<span class="punctuation">)</span>'),r&&(r=S(r)),`<span class="tag-name">${l}</span>${c}${n}`+(a?'<span class="punctuation">.</span>':"")+(i||"")+(r?`<span class="text">${r}</span>`:"")}else{const[l,c="",n="",a="",i]=t,r=c.replace(T[d.language],e);return`<span class="punctuation">&lt;${a}</span><span class="tag-name">${l||i}</span>`+r+`<span class="punctuation">${n}&gt;</span>`}},S=t=>t.replace(new RegExp(y.pug["inline-tag"],"gsi"),(e,l)=>'<span class="inline-tag">#[</span>'+l.replace(new RegExp(y.pug.tag,"si"),(c,...n)=>(n=n.slice(0,n.length-2),k(n)))+'<span class="inline-tag">]</span>'),z=()=>{if(N.value.includes(d.language)){const t=M();b.value.innerHTML=x(b.value.innerText),$(b.value.childNodes,t)}},M=()=>{const t=window.getSelection();t.collapseToEnd();const e=new Range;return e.setStart(b.value,0),e.setEnd(t.extentNode,t.extentOffset),e.toString().length},$=(t,e)=>{var c,n;let l=0;for(const a of t){const i=((c=a.innerText)==null?void 0:c.length)||a.length;if(l+i>=e){a.childNodes.length>1?$(a.childNodes,e-l):document.getSelection().setPosition(((n=a.childNodes)==null?void 0:n[0])||a,e-l);break}l+=i}},D=t=>{switch(t.which){case 9:v(d.tab),t.preventDefault();break;case 13:v(`
`),t.preventDefault();break}},v=t=>{const e=window.getSelection(),l=e.getRangeAt(0),c=document.createTextNode(t);l.insertNode(c),e.collapseToEnd()},x=t=>{if(!N.value.includes(d.language))return t;const[e,l]=O();return E(t.replace(/&/g,"&amp;")).replace(new RegExp(e,"gsi"),(c,...n)=>{n=n.slice(0,n.length-2);let a;const i=d.language==="pug";let r=n.find((g,s)=>g&&(a=l[s])&&g);if(["punctuation","quote","htmlentity"].includes(a))r=E(r);else if(a==="comment")if(i){const[g,s,p]=n.slice(l.indexOf("comment"));r=`${g}${s}${E(p)}`}else r=E(r);else if(a==="text"&&i){let[g,s,p]=n;return p=S(p),`${g}<span class="punctuation">|</span>${s}<span class="text">${p}</span>`}else if(a==="text2"&&i){const[,,,g,s,p]=n,_=x(s);return`${g}${_}<span class="punctuation">.</span>
<span class="text">${p}</span>`}else{if(a==="tag"&&["xml","html","html-vue","pug"].includes(d.language))return k(n.slice(l.indexOf("tag")));if(a==="variable"&&r[0]==="."&&d.language==="js")return`<span class="punctuation">.</span><span class="obj-attr">${r.substr(1)}</span>`}let m="";if(a==="color"&&d.language==="css"){const{dark:g,alpha:s}=L(r);a+=` color--${g?"dark":"light"}${s<.4||r==="transparent"?" color--transparent":""}`,m=` style="background-color: ${r}"`}return a&&`<span class="${a}"${m}>${r}</span>`||""})},U=()=>I.default&&w(I.default())||"",B=u.computed(()=>x(U())),H=t=>{t.target.insertAdjacentHTML("afterend",`<textarea id="clipboard-textarea">${b.value.innerText}</textarea>`);const e=document.getElementById("clipboard-textarea");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),e.remove(),q("copied",b.value.innerText)};return(t,e)=>(u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass(["ssh-pre",{"ssh-pre--dark":h.dark}]),"data-type":h.language,"data-label":h.label||null},[h.copyButton?(u.openBlock(),u.createElementBlock("button",{key:0,class:"ssh-pre__copy",onClick:H},[u.renderSlot(t.$slots,"copy-button",{},()=>[e[1]||(e[1]=u.createTextVNode("Copy",-1))])])):u.createCommentVNode("",!0),e[2]||(e[2]=u.createTextVNode()),u.createElementVNode("pre",{ref_key:"codeEl",ref:b,class:"ssh-pre__content",contenteditable:h.editable?"true":"false",innerHTML:B.value,onKeydown:e[0]||(e[0]=l=>h.editable&&D(l)),onInput:z},null,40,C)],10,f))}}});