-5

esta es la pagina aqui el autor creó un script en python que le ayuda a renderizar una ecuación matematica escrita en reStructuredText usando un generador de contenido llamado pelican y presentarla con puro css.

¿alguien puede generar el sitio de ejemplo, que esta dentro del mismo repositorio?.

2
  • 1
    La parte de matemáticas no la hace con puro CSS, pero al menos no usa javascript como otros enfoques (KaTeX, MathJax). Lo que hace es, en el ordenador de quien genera el contenido, invocar latex para renderizar la ecuación y después convertir el resultado en SVG (convirtiendo las fuentes en outlines) y es este SVG el que queda embebido en la página a mostrar. El autor necesita por tanto tener instalado LaTeX y una serie de utilidades (python) para convertir a SVG. A cambio el lector no necesita usar javascript y el resultado es más portable.
    – abulafia
    el 6 dic. 2018 a las 18:44
  • Gracias, podrías hacer un ejemplo por favor de como se usan los plug­ins?
    – Irra
    el 6 dic. 2018 a las 19:11

1 respuesta 1

3

La forma más rápida de poner un sitio de ejemplo en marcha sería la que detallo a continuación. Sin embargo el sitio no es precisamente simple (es el propio sitio de m.css que has visto, que contiene demos de todas sus características!)

No tengo tiempo ni conocimientos para hacer un sitio más sencillo y por tanto más apto para usarse como punto de partida, pues apenas he usado Pelican un par de veces y no tengo claro cómo funcionan sus archivos de configuración, plugins, etc. Pero espero que al menos estas breves instrucciones te sirvan para tener "algo" que poder modificar, experimentar y estudiar.

Los pasos serían los siguientes (supongo que tienes Python3.5 como mínimo y trabajas en un sistema tipo Unix, se asume también que tienes instalado LaTeX).

1. Crear entorno virtual para instalar paquetes python

$ virtualenv --python=python3 ~/pelican
$ source ~/pelican/bin/activate
(pelican) $ pip install pelican matplotlib
... esperar que termine la instalación

matplotlib hace falta porque algunas de las páginas de demo lo requieren.

2. Clonar el propio repositorio de m.css

$ git clone https://github.com/mosra/m.css.git
$ cd m.css

3. "Compilar" el sitio para generar un sitio estático

$ cd site
$ pelican

Al cabo de un ratito tendrás una carpeta output con el resultado.

4. Arrancar servidor http de prueba para ver el sitio

$ cd output
$ python -m http.server

Ahora puedes conectar un navegador con localhost:8000 y ver el resultado.

Estudiar el código, experimentar

Básicamente en site tienes el fichero de configuración pelicanconf.py que especifica en qué ruta están los plugins (están en ../pelican-plugins), qué temas usar, qué menús tiene que tener la página, etc.. En este caso es un fichero de configuración complejo. No sabría cómo simplificarlo.

Y tienes una carpeta llamada content (que es un enlace simbólico a ../doc) donde está todo el fuente en reStructuredText que puedes leer para hacerte una idea de qué sintaxis usa y comparar con la versión "compilada" que puedes ver en el navegador en localhost:8000.

Yo acabo de hacer todo lo anterior y me ha funcionado. Para ver la "demo" de la parte matemática debes ir a localhost:8000/admire/math. Sólo por experimentar, he cambiado en pelicanconf.py donde aparece m-dark.css por m-light.css, para ver las mismas páginas en estilo luminoso. El resultado es bastante horrible (pues supongo que habría cambiar más opciones en la configuración que afectan al color de los menús, etc.), pero ha funcionado, y tiene una pinta así:

Resultado

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.