Chalk.ist : outil open source de capture de code créé par Idered 82

Qu'est-ce que Chalk.ist ?

Chalk.ist est un outil open-source de capture d'écran de code développé par Idered, conçu principalement pour aider les développeurs à transformer du code en images esthétiques. L'utilisateur colle simplement le code, choisit un thème et un style, et peut créer rapidement de belles captures d'écran de code, prenant en charge plusieurs langages de programmation. Il convient à la rédaction de blogs, aux présentations ppt, au partage sur les réseaux sociaux et à d'autres scénarios.

Fonctionnalités de Chalk.ist

• Interface intuitive : un panneau de paramètres à gauche propose de nombreuses options de réglage telles que les thèmes, les polices, les arrière-plans et les formats. Les divers arrière-plans dégradés sont esthétiques, et les utilisateurs peuvent explorer et ajuster selon leurs préférences, ce qui répond aux besoins personnalisés des différents utilisateurs en matière de style d'affichage du code.

• Hautement personnalisable :

• Ajustement fin du code : il est possible d'ajuster la police, la taille, l'interligne, l'espacement des caractères et d'autres détails du code selon ses préférences, et de choisir différents styles de coloration syntaxique pour rendre le code plus clair et lisible.

• Personnalisation du style de fenêtre : prise en charge de la personnalisation du style de la fenêtre, y compris l'arrière-plan, la barre de titre, l'ombre de la fenêtre, etc., pour rendre les captures d'écran plus professionnelles.

• Multiples options de décoration : prise en charge des décorations de lignes, du bruit de fond, des particules de fond et de nombreuses autres options décoratives pour améliorer l'effet visuel des captures d'écran de code.

• Thèmes riches : inclut une série de thèmes prêts à l'emploi et permet aux utilisateurs de créer leurs propres thèmes. Plusieurs thèmes et styles intégrés sont disponibles, permettant de choisir librement la palette de couleurs la plus adaptée à son style.

• Pratique et efficace : en quelques étapes simples, le code est transformé en une magnifique image, idéale pour le partage sur les réseaux sociaux, ce qui permet d'économiser du temps et de l'énergie.

• Prise en charge de l'enregistrement des préréglages : les utilisateurs peuvent enregistrer les paramètres actuels comme préréglages pour un accès et une utilisation rapides ultérieurement, permettant d'appliquer rapidement les styles courants lors de la prochaine capture d'écran, ce qui est rapide et efficace.

• Facile à partager : les utilisateurs peuvent exporter les captures d'écran de code embellies au format PNG ou SVG et les partager facilement sur les réseaux sociaux ou les intégrer dans des blogs.

• Performances supérieures : construit avec Vue 3, rapide.

Architecture technique

• Front-end : basé sur Vue.js, offrant de riches options d'interaction et de configuration d'interface utilisateur.

• Back-end : principalement piloté par Nuxt.js, prenant en charge le routage dynamique et le rendu côté serveur.

• Traitement des styles : mis en œuvre via TailwindCSS, flexible et efficace. De plus, le projet fournit un point d'accès API /healthcheck qui peut être utilisé pour surveiller l'état de santé du service.

Tutoriel d'utilisation de Chalk.ist

1. Accédez au site web de Chalk.ist : rendez-vous sur https://chalk.ist/ .

2. Choisissez un thème de code : sélectionnez votre thème de code préféré sur le site web. Il propose plusieurs thèmes prédéfinis et personnalisés pour répondre aux besoins des différents utilisateurs.

3. Collez le code : collez le code que vous souhaitez embellir dans l'éditeur, où vous pouvez voir un aperçu en temps réel du code.

4. Personnalisez le style : personnalisez le style du code selon vos besoins, y compris le style de la fenêtre, la couleur d'arrière-plan, la police, l'affichage des numéros de ligne, etc. Vous pouvez également ajuster les paramètres de bordure, d'ombre, de transparence de la fenêtre pour rendre la capture d'écran plus esthétique.

5. Exportez la capture d'écran : une fois la personnalisation terminée, cliquez sur le bouton « Exporter » pour enregistrer la capture d'écran du code embellie localement, en choisissant le format PNG ou SVG.

Méthode de déploiement

http://chalk.ist/ utilise Nuxt.js pour le développement front-end et back-end, et prend en charge un déploiement rapide sur Vercel, ce qui est très pratique. Si vous souhaitez l'exécuter en local, suivez les étapes ci-dessous :

1. Clonez le projet : exécutez la commande git clone https://github.com/Idered/chalk.ist dans le terminal.

2. Installez les dépendances : utilisez la commande pnpm install pour installer les dépendances nécessaires au projet.

3. Démarrez l'environnement de développement : exécutez la commande pnpm run dev pour lancer Chalk.ist en local.

Adresse open-source : https://github.com/Idered/chalk.ist

Actualités connexes :

Outil d'embellissement de captures d'écran