Resaltado de sintaxis con CSS puro-ft-sintaxis-resaltado

Vista prévia

Descripción

ft-Syntax-Highlight es un resaltador de sintaxis puro basado en CSS que viene con 8 temas personalizados e información sobre herramientas interactivas.

Supported Languages:

• Css
• Html
• Javascript
• Jquery
• Php
• Python
• VB
• Xml

¿Cómo funciona?

Incluya la hoja de estilos ft-Syntax-Highlight. CSS desde carpeta src .

<link rel="stylesheet" href="ft-syntax-highlight.css">

Inserte los códigos fuente en el pre código etiquetas como estos:

<pre class="ft-syntax-highlight" data-syntax="js">

<code>

<span class="comment">// Example JS Class</span>

<span class="keyword">class</span> <span class="identifier-class">Rectangle</span> {


<span class="identifier">constructor</span>(<span class="parameter">height</span>, <span class="parameter">width</span>) {



<span class="object">this</span>.<span class="property">height</span> <span class="operand">=</span> height;



<span class="object">this</span>.<span class="property">width</span> <span class="operand">=</span> width;


}


<span class="comment">// Getter</span>


<span class="identifier-native">get</span> <span class="identifier-udf">area</span>() {



<span class="keyword">return</span> <span class="object">this</span>.<span class="identifier-udf">calcArea</span>();


}


<span class="comment">// Method</span>


<span class="identifier-udf">calcArea</span>() {



<span class="keyword">return</span> <span class="object">this</span>.<span class="property">height</span> <span class="operand">*</span> <span class="object">this</span>.<span class="property">width</span>;


}

}


<span class="keyword">const</span> <span class="identifier-constant">square</span> = <span class="keyword">new</span> <span class="identifier-class">Rectangle</span>(<span class="unit">10</span>, <span class="unit">10</span>);


<span class="identifier-class">console</span>.<span class="identifier-native">log</span>(<span class="object">square</span>.<span class="property">area</span>); <span class="comment"> //100</span>

</code>
</pre>

Config el resaltador de sintaxis con los siguientes datos atributos:

• Data-Syntax: define los lenguajes
• datos-sintaxis-tema: Oscuro (por defecto), Bootstrap4, Burberry, Navidad, Halloween, luz, medianoche, simple
• Data-UI-Theme: Bootstrap, medianoche, uno-oscuro, uno-luz, simple, vbgreen
• Data-showTooltips: muestra información sobre herramientas al pasar el ratón

<pre class="ft-syntax-highlight" data-syntax="js" data-syntax-theme="one-dark" data-showTooltips="true">

<code>


...

</code>
</pre>

Registro de cambios

07/21/2018

• 4 nuevos temas de interfaz de usuario, archivo src minimizado y ajustes menores