liburno_elang

Questa libreria permette ti trasformare il codice sorgente javascript, sql,json, bash e html, portando in output codice HTML che con le opportuni css puó essere renderizzato da un browser con colori.

Per installare:

npm i liburno_elang

per l'utilizzo, all'interno di un progetto gestito da un package manager

import {elang,controls} from 'liburno_elang'
// id dove inserire l'elemento formattato
var myid="someid" 
// codice sorgente da formattare
var src=`
... some code script ....
`
// formattazione
var res=elang(src,"js",true);
// scrittura nel DOM
document.getElementById(myid).innerHTML=res;

L'utilizzo di questo modulo richede la personalizzazione del css: le classi create iniziano sempre con il prefisso elang_, e ne riporto un esempio.

.elang {
  background: none;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.3;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  padding: 0 0;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  padding:8px;
}
.elang_rowid {
    font-size: .75rem;
    color: #cbd5e0;
    margin-right: .75rem
}
.elang_string {
  color:red;
}
.elang_json_string1 {
  color:blue;
}
.elang_comment {
   color:green;
}
.elang_punc {
color: darkcyan;
}
.elang_punc2 {
  color: darkslategray;
}
.elang_number {
  color: darkgoldenrod;
}
.elang_tag,
.elang_word {
   color:purple; 
}
.elang_keys {
  color:blue;
}
.elang_intag,
.elang_keys2 {
  color:darkblue;
}
.elang_sql_keys2 {
  color:darkcyan;
   text-transform: uppercase;
}
.elang_sql_keys1 {
  text-transform: lowercase;
}
.elang_regex {
   color:violet;
}
.elang_bash_keys1 {
    color: purple;
}

ovviamente, i colori sono arbitrari, ma le classi assegnate ai vari elementi sono arbitrarie, ma per ogni oggetto sono assegnate più classi, ad esempio per una keyword di tipo 2 di javascript le classi saranno:

elang_js_keys2 elang_keys2 elang_js_keys elang_keys

in questo modo basta attivare un CSS a livello specifico per esempio su elang_js_keys2 o generico e indipendente da linguaggio su elang_keys. La priorità varia con l'ordine di scrittura nel file css.

l'oggetto di definizione della sintassi:

L'oggetto controls è una varibile che contiene all'interno le espressioni regolari per la ricerca e sostituzione dei colori. La metodologia utilizzata prevede la ricerca per un linguaggio specifico e in sua assenza per le dichiarazioni generiche.

Riporto per esteso la definizione di controls:

{
    string: /(".*?[^\\]"|'.*?[^\\]'|`[^]*?[^\\]`)/m,
    puntuaction: /(-[-=]?|,|;|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3})/g,
    parentesis: /(\(|\)|\[|\]|\{|\})/g,
    ingraffe: /([^$])(\{)(.*?)(\})/g,
    regex: /\/.*?[^\\]\/[gimu]/m,
    numbers: /\b((?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?)/gi,
    js: {
        comments: /(?:(?:^|[^\\:])(\/\/.*)|(?:^|[^\\])(\/\*[\s\S]*?(?:\*\/)))/m,
        keyword: /(\b)(as|true|false|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)(\b)/g,
        keyword2: /(\.\w+|\w+\:)/g
    },
    json: {
        string: /(".*?[^\\]")/m,
        string1: /(".*?[^\\]"\s*:)/m,
    },
    html: {
        script: /(<script[\s\S]*?>)([^]*?)(<\/script>)/im,
        tag: /\<(!DOCTYPE|\/?\w+)([^]*?)(\/?\>)/im,
        intag: /(\b)([\w-]+)(=)/g,
        comments: /\<\!--[^]*?--\>/im
    },
    bash: {
        comments: /# .*/,
        keyword1: /(^ *|\; *)(\w+)(\b)/g,
        keyword: /(\b)(sudo *[\w-]+)(\b)/g
    },
    python: {

    },
    sql: {
        keyword: '.',
        keyword2: /(\b)(FROM|USING|FTS5|NVARCHAR|INTEGER|REAL|BLOB|DELETE|UPDATE|BEGIN|END|ADD|CREATE|CONSTRAINT|ALTER|COLUMN|TABLE|ALL|ASC|BETWEEN|CASE|CHECK|COLUMN|INDEX|VIEW|PROCEDURE|DESC|DISTINTC|DROP|OUTER|INNER|LEFT|JOIN|INSERT|INTO|[NOT ]*NULL|LIMIT|SELECT|ORDER BY|UNION|WHERE)(\b)/gi,
        keyword1: /(\b)(COLLATE|NOCASE|DEFAULT|IF [NOT ]*EXISTS|PRIMARY KEY|VALUES|AS)(\b)/gi,
        comments: /(?:(?:^|[^\\:])(\/\/.*)|(?:^|[^\\])(\/\*[\s\S]*?(?:\*\/))|(--\s.*))/m
    }
}

come si vede, c'è una sezione generica e una specifica per ogni linguaggio. gli oggetti valutati sono nell'ordine di priorità:

• script: ossia codice presente di altri linguaggi (html)
• comments: commenti semplici e multilinea
• keyword,keyword1,keyword2: parole chiave sia come elenco che come formule.
• tag,intag: specifico per html
• string,string1: diversi tipi di stringa
• regex: espressioni regolari
• numbers:
• punctuation,parentesis,ingraffe: punteggiatura

il progetto

l'idea del progetto nasce da voler un evidenziatore di sintassi molto compatto e facilemente estendibile.

Avevo usato prism, che funziona molto bene, ma volevo capire meglio l'evidenziazione di sintassi e cosí ho ricostruito questo progetto.

Si è fatto largo uso di ricerca e sostituzione con le espressioni regolari; il progetto non ha dipendenze.