codehl.js
API para renderizar código MATLAB, Python, LaTeX, C, C++, C#, R, Java, JavaScript, Shell, XML, JSON y PHP en HTML con resaltado de sintaxis y botón de copiado.
El resaltado de sintaxis se basa parcialmente en highlight.js (BSD 3-Clause License).
Qué hace la API
La API convierte automáticamente bloques
<script type="text/matlab">,
<script type="text/python">,
<script type="text/latex">,
<script type="text/c">,
<script type="text/cpp">,
<script type="text/csharp">,
<script type="text/r">,
<script type="text/java">,
<script type="text/javascript">,
<script type="text/shell">,
<script type="text/xml">,
<script type="text/json"> y
<script type="text/php"> en un bloque
<pre><code> con el formato del lenguaje especificado, resaltado de sintaxis y
un botón para copiarlo al portapapeles del sistema.
Uso básico: Ejemplo con Python
<script src="https://codehl.vercel.app/python.js"></script>
<script type="text/python">
def fib(n):
a, b = 0, 1
out = []
while len(out) < n:
out.append(a)
a, b = b, a + b
print(out)
</script>Resultado renderizado:
Color de fondo del bloque
Por omisión, el fondo del código es transparente. Si se requiere aplicar un color de fondo, esta opción debe desactivarse y luego debe definirse el estilo CSS correspondiente.
<script src="https://codehl.vercel.app/matlab.js"
data-transparent-background="false"></script>
<style>
pre {
background: #eef6ff;
}
</style>Desactivar el botón de copiado
El botón de copiado se encuentra habilitado por omisión. Puede desactivarse a nivel global en la API o de forma puntual por bloque.
<script src="https://codehl.vercel.app/matlab.js"
data-copy-button="false"></script>
<script type="text/matlab" data-copy-button="false">
A = [1 2; 3 4];
b = eig(A);
disp(b)
</script>Desactivar márgenes y bordes predeterminados
Cada API incluye, por defecto, métricas de margen, borde y relleno para los bloques renderizados. Para mantener control total desde CSS, estas métricas pueden desactivarse.
<script src="https://codehl.vercel.app/python.js"
data-default-block-styles="false"></script>Reescribir márgenes y bordes predeterminados
También es posible mantener los estilos base y ajustar únicamente lo necesario mediante CSS.
<style>
pre {
border: 2px solid #9db3c7;
border-radius: 14px;
padding: 0.75rem;
margin: 0.25rem 0;
}
</style>El mismo criterio puede aplicarse a cada lenguaje mediante selectores o reglas CSS más específicas según los requisitos de diseño:
<script src="https://codehl.vercel.app/matlab.js"></script>
<script src="https://codehl.vercel.app/python.js"></script>
<style>
/* Estilo solo para MATLAB */
.matlab-code-pre {
border-left: 4px solid #f59e0b;
margin: 0.3rem 0;
}
/* Estilo solo para Python */
.python-code-pre {
border-left: 4px solid #3776ab;
margin: 0.3rem 0;
}
/* Botón copiar solo en Python */
.python-code-copy-button {
opacity: 0.85;
}
</style>
<script type="text/matlab">
A = [1 2; 3 4];
eig(A)
</script>
<script type="text/python">
print("hola")
</script>