st.code, st.echo y st.latex para código y fórmulas matemáticas

st.code: bloques de código con resaltado de sintaxis

st.code renderiza un bloque de código con resaltado de sintaxis para el lenguaje especificado. Es ideal para documentación técnica, tutoriales y mostrar ejemplos de código:

import streamlit as st

# Bloque de código Python
st.code("""
import pandas as pd
import numpy as np

df = pd.DataFrame({
    'A': np.random.randn(100),
    'B': np.random.randn(100)
})
print(df.describe())
""", language="python")

# Código SQL
st.code("""
SELECT
    producto,
    SUM(importe) AS total_ventas,
    COUNT(*) AS num_pedidos,
    AVG(importe) AS ticket_medio
FROM pedidos
WHERE fecha >= '2026-01-01'
GROUP BY producto
ORDER BY total_ventas DESC
LIMIT 10;
""", language="sql")

# Código bash
st.code("""
pip install streamlit pandas plotly
streamlit run app.py --server.port 8080
""", language="bash")

# JSON
st.code("""
{
    "modelo": "RandomForestClassifier",
    "accuracy": 0.9432,
    "params": {
        "n_estimators": 200,
        "max_depth": 10,
        "min_samples_split": 5
    }
}
""", language="json")

Los lenguajes soportados incluyen: python, javascript, typescript, html, css, sql, bash, json, yaml, toml, r, java, kotlin, rust, go, cpp, csharp, entre muchos otros (usa Prism.js internamente).

Número de línea y líneas destacadas

st.code("""
import streamlit as st

# Esta es la función principal
def main():
    st.title("Mi aplicación")
    nombre = st.text_input("Nombre")
    if nombre:
        st.write(f"Hola, {nombre}!")

if __name__ == "__main__":
    main()
""", language="python", line_numbers=True)

flowchart TD
    A[Contenido técnico en página] --> B{"Tipo de salida?"}
    B -->|Bloque código| C[st.code language python sql bash]
    B -->|Mostrar y ejecutar| D[st.echo with block]
    B -->|Fórmula matemática| E[st.latex expresión]
    B -->|Inline LaTeX| F[st.markdown signo dolar]
    C --> G[Resaltado sintaxis Pygments]
    D --> H[Código y resultado simultaneo]
    E --> I[KaTeX renderiza fórmula]
    F --> I
    G --> J[Documentación técnica clara]
    H --> J
    I --> J

st.echo: mostrar y ejecutar código simultáneamente

st.echo es un gestor de contexto que muestra el código del bloque y luego lo ejecuta. Es muy útil para crear tutoriales interactivos dentro de la propia aplicación:

import streamlit as st
import pandas as pd
import numpy as np

st.title("Tutorial interactivo de Pandas")

st.markdown("### Paso 1: Crear un DataFrame")

with st.echo():
    # Este código se muestra en pantalla Y se ejecuta
    df = pd.DataFrame({
        "nombre": ["Ana", "Luis", "María", "Carlos"],
        "edad": [28, 35, 24, 42],
        "salario": [45000, 62000, 38000, 71000]
    })
    st.dataframe(df)

st.markdown("### Paso 2: Calcular estadísticas")

with st.echo():
    media_salario = df["salario"].mean()
    mediana_salario = df["salario"].median()
    st.write(f"Salario medio: **€ {media_salario:,.0f}**")
    st.write(f"Salario mediano: **€ {mediana_salario:,.0f}**")

st.echo acepta el parámetro code_location para controlar si el bloque de código se muestra antes o después de la salida:

with st.echo(code_location="below"):
    # El código aparece debajo de su resultado
    resultado = 2 + 2
    st.write(f"2 + 2 = {resultado}")

st.latex: fórmulas matemáticas

st.latex renderiza expresiones matemáticas usando KaTeX, la biblioteca de renderizado LaTeX de alto rendimiento:

import streamlit as st

# Fórmula simple
st.latex(r"E = mc^2")

# Integral
st.latex(r"\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}")

# Sumatorio
st.latex(r"\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}")

# Fracción compleja
st.latex(r"\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}")

# Sistema de ecuaciones
st.latex(r"""
\begin{cases}
    ax + by = c \\
    dx + ey = f
\end{cases}
""")

# Matriz
st.latex(r"""
\mathbf{A} = \begin{pmatrix}
    a_{11} & a_{12} & a_{13} \\
    a_{21} & a_{22} & a_{23} \\
    a_{31} & a_{32} & a_{33}
\end{pmatrix}
""")

LaTeX en línea dentro de st.markdown

Para incluir matemáticas dentro de texto, usa la sintaxis $...$ para modo en línea y $$...$$ para modo display dentro de st.markdown:

import streamlit as st

st.markdown("""
La **fórmula de regresión lineal** es $y = \\beta_0 + \\beta_1 x + \\epsilon$, donde:
- $\\beta_0$ es el término independiente (intercepto)
- $\\beta_1$ es el coeficiente de la variable predictora
- $\\epsilon$ es el término de error aleatorio

La función de coste se define como:

$$J(\\beta) = \\frac{1}{2m} \\sum_{i=1}^{m} (h_\\beta(x^{(i)}) - y^{(i)})^2$$

donde $m$ es el número de muestras de entrenamiento.
""")

Aplicación práctica: documentación técnica de un modelo ML

import streamlit as st

st.title("Documentación del Modelo de Predicción de Churn")

st.header("Descripción matemática")

st.markdown("El modelo usa **regresión logística** con la función sigmoide:")
st.latex(r"\hat{y} = \sigma(w^T x + b) = \frac{1}{1 + e^{-(w^T x + b)}}")

st.markdown("La función de pérdida es la **entropía cruzada binaria**:")
st.latex(r"L(y, \hat{y}) = -[y \log(\hat{y}) + (1-y) \log(1-\hat{y})]")

st.header("Implementación en Python")
st.code("""
from sklearn.linear_model import LogisticRegression
from sklearn.metrics import roc_auc_score

model = LogisticRegression(C=1.0, max_iter=1000, random_state=42)
model.fit(X_train, y_train)

y_pred_proba = model.predict_proba(X_test)[:, 1]
auc = roc_auc_score(y_test, y_pred_proba)
print(f"AUC-ROC: {auc:.4f}")
""", language="python", line_numbers=True)

st.header("Resultados")
col1, col2 = st.columns(2)
col1.metric("AUC-ROC", "0,9431", "+0,0215 vs baseline")
col2.metric("Precisión @ threshold=0.5", "87,3%", "+3,1%")

La combinación de st.code, st.echo y st.latex convierte Streamlit en una plataforma ideal para crear documentación técnica viva, donde la explicación y el código ejecutable coexisten en la misma página.

Contexto: por qué estas tres funciones van juntas

st.code, st.echo y st.latex no son elementos decorativos: son los cimientos para convertir una app Streamlit en un cuaderno de trabajo técnico. Si la mayoría de las bibliotecas de dashboards se centran en widgets y gráficos, Streamlit añade soporte de primera clase para mostrar el proceso, no solo el resultado. Esto es especialmente valioso en contextos formativos (tutoriales interactivos), científicos (papers reproducibles) y empresariales (documentación de modelos entregables a clientes o auditores).

Internamente, st.code usa Prism.js para el resaltado de sintaxis, st.echo combina introspección de Python (módulo inspect) con st.code para mostrar el código fuente del bloque que se está ejecutando, y st.latex utiliza KaTeX, una de las bibliotecas de renderizado LaTeX más rápidas disponibles en JavaScript. Esta combinación permite explicar matemáticas, mostrar su implementación y ejecutar los cálculos reales todo en la misma página.

Explicación línea por línea de st.echo

st.echo merece una explicación especial porque su funcionamiento no es evidente:

1. Al entrar en el bloque with st.echo():, Streamlit inspecciona el código fuente del archivo Python actual.
2. Captura todas las líneas indentadas dentro del bloque with y las renderiza como un bloque de código en la página.
3. Tras mostrar el código, ejecuta esas mismas líneas normalmente. Todo lo que las líneas produzcan (prints, widgets, st.write) aparece debajo del bloque mostrado.
4. El parámetro code_location="below" invierte el orden: primero se ve el resultado, luego el código.

Esto lo hace ideal para construir tutoriales donde el estudiante puede leer el código y ver el resultado simultáneamente, sin tener que copiar y pegar en otro editor.

Tabla de parámetros

| Función | Parámetro | Descripción | |---------|-----------|-------------| | st.code | body | Cadena con el código a mostrar | | st.code | language | Lenguaje para resaltado (python, sql, bash, etc.) | | st.code | line_numbers | Muestra números de línea a la izquierda | | st.code | wrap_lines | Envuelve líneas largas en vez de scroll horizontal | | st.echo | code_location | "above" (default) o "below" | | st.latex | body | Expresión LaTeX como string raw | | st.latex | help | Tooltip al pasar el ratón sobre la fórmula |

Errores comunes

LaTeX con escapes mal interpretados. Los strings normales de Python interpretan \n, \t, etc. como caracteres especiales. Siempre usa prefijo r"..." (raw string) en st.latex para evitar que \frac se convierta accidentalmente en un carácter raro. Sin el prefijo, "\frac" se interpreta como "el carácter \f + rac".

st.echo con funciones externas. st.echo solo captura el código literal dentro del bloque with. Si llamas a una función definida en otro archivo, solo verás la llamada, no la implementación. Para mostrar código de funciones externas, usa inspect.getsource() y pásalo a st.code.

Lenguaje desconocido en st.code. Si pasas language="dockerfile" y Prism.js no lo reconoce, el código aparecerá sin resaltado pero sin error. Verifica los lenguajes soportados en la documentación de Prism.

Fórmulas en st.markdown con backslash escapado. Dentro de st.markdown, los backslashes LaTeX necesitan doble escape (\\beta en lugar de \beta) porque Markdown también los procesa. Es uno de los errores más frustrantes para principiantes.

Mejores prácticas

• Usa st.code para ejemplos estáticos y st.echo para código que realmente se ejecuta y quieres mostrar. No mezcles: si el código que muestras con st.code está desincronizado con el que ejecutas, el tutorial se volverá confuso.
• Mantén las expresiones LaTeX relativamente simples: las ecuaciones muy largas en móviles se desbordan. Para fórmulas gigantes, considera renderizarlas como imagen con Matplotlib.
• Activa line_numbers=True en bloques de código largos para facilitar las referencias en la narrativa.
• En documentación técnica, alterna bloques de st.markdown explicativos con st.latex para las fórmulas y st.code para el código. El resultado es mucho más legible que amontonar todo en un solo bloque.
• Si el código incluye rutas de archivo o credenciales, usa placeholders como "YOUR_API_KEY" o "/path/to/file" para que los alumnos no copien datos sensibles por accidente.