Chalk.ist: herramienta de código abierto para capturas de código creada por Idered 71

¿Qué es Chalk.ist?

Chalk.ist es una herramienta de código abierto creada por Idered que permite generar herramientas a partir de código en forma de capturas de pantalla美观. Los usuarios solo necesitan pegar el código, elegir un tema y un estilo, y podrán crear rápidamente capturas de pantalla de código con un aspecto atractivo. Admite múltiples lenguajes de programación. Es ideal para la redacción de blogs, presentaciones ppt, compartir en redes sociales y otros escenarios.

Características de Chalk.ist

• Interfaz intuitiva: en el lado izquierdo hay un panel con numerosos parámetros de ajuste como tema, fuente, fondo y formato, con diversos fondos de gradiente de aspecto atractivo. Los usuarios pueden explorar y ajustar por su cuenta, satisfaciendo las necesidades personalizadas de diferentes usuarios en cuanto al estilo de presentación del código.

• Altamente personalizable:

• Ajuste de detalles del código: se pueden ajustar detalles como la fuente, el tamaño de letra, el interlineado y el espaciado entre caracteres según las preferencias. También se puede elegir entre diferentes estilos de resaltado de código para que el código sea más claro y legible.

• Personalización del estilo de la ventana: admite la personalización del estilo de la ventana, incluyendo el fondo de la ventana, la barra de título, la sombra de la ventana, entre otros, lo que hace que las capturas de pantalla sean más profesionales.

• Múltiples opciones de decoración: admite varias opciones decorativas como decoración de líneas, ruido de fondo y partículas de fondo, mejorando el efecto visual de las capturas de pantalla del código.

• Temas variados: incluye una serie de temas prefabricados y permite a los usuarios crear sus propios temas. Viene con múltiples temas y estilos integrados, pudiendo elegir libremente la combinación de colores que mejor se adapte a su estilo.

• Cómodo y eficiente: en unos pocos pasos sencillos se puede convertir el código en una imagen atractiva, ideal para compartir en cualquier red social, ahorrando tiempo y esfuerzo.

• Soporte para guardar preajustes: los usuarios pueden guardar la configuración actual como un preajuste para acceder y utilizarla rápidamente en el futuro, lo que permite aplicar rápidamente los estilos habituales en la próxima captura de pantalla, ahorrando tiempo y esfuerzo.

• Fácil de compartir: los usuarios pueden exportar las capturas de pantalla del código embellecido en formato PNG o SVG, y compartirlas fácilmente en redes sociales o incrustarlas en blogs.

• Rendimiento superior: construido con Vue 3, es rápido.

Arquitectura técnica

• Frontend: basado en Vue.js, ofrece una gran cantidad de opciones de configuración de interacción y UI.

• Backend: impulsado principalmente por Nuxt.js, admite el enrutamiento dinámico y la capacidad de renderizado del lado del servidor.

• Procesamiento de estilos: implementado mediante TailwindCSS, flexible y eficiente. Además, el proyecto también ofrece un endpoint de API /healthcheck que se puede utilizar para monitorizar el estado de salud del servicio.

Tutorial de uso de Chalk.ist

1. Accede al sitio web de Chalk.ist: visita https://chalk.ist/ .

2. Elige un tema de código: selecciona el tema de código que prefieras en el sitio web. Ofrece múltiples temas preestablecidos y personalizados para satisfacer las necesidades de distintos usuarios.

3. Pega el código: pega el código que deseas embellecer en el editor, donde podrás ver el efecto de previsualización en tiempo real del código.

4. Personaliza el estilo: personaliza el estilo del código según sea necesario, incluyendo el estilo de la ventana, el color de fondo, la fuente, la visualización de los números de línea, etc. También puedes ajustar parámetros como el borde de la ventana, la sombra y la transparencia, para que la captura de pantalla sea más atractiva.

5. Exporta la captura de pantalla: tras completar la personalización, haz clic en el botón "Exportar" para guardar localmente la captura de pantalla del código embellecido, pudiendo elegir exportar en formato PNG o SVG.

Métodos de despliegue

http://chalk.ist/ utiliza Nuxt.js para el desarrollo del frontend y backend, y admite un despliegue rápido en Vercel, lo cual resulta muy conveniente. Si deseas ejecutarlo en local, sigue estos pasos:

1. Clonar el proyecto: ejecuta el comando git clone https://github.com/Idered/chalk.ist en la terminal.

2. Instalar dependencias: utiliza el comando pnpm install para instalar las dependencias necesarias del proyecto.

3. Iniciar el entorno de desarrollo: ejecuta el comando pnpm run dev para iniciar Chalk.ist localmente.

Dirección de código abierto: https://github.com/Idered/chalk.ist

Información relacionada:

Herramientas de embellecimiento de capturas de pantalla