Chalk.ist: Open-Source-Code-Screenshot-Tool von Idered 72

Was ist Chalk.ist?

Chalk.ist ist ein von Idered entwickeltes Open-Source-Tool für Code-Screenshots, das Entwicklern hauptsächlich dabei hilft, Code in ästhetisch ansprechende Bilder umzuwandeln. Benutzer müssen lediglich Code einfügen, ein Thema sowie einen Stil auswählen und können so schnell schöne Code-Screenshots erstellen. Es werden zahlreiche Programmiersprachen unterstützt. Es eignet sich für Blog-Schreiben, PPT-Präsentationen sowie das Teilen in sozialen Medien.

Funktionen von Chalk.ist

• Intuitive Benutzeroberfläche: Auf der linken Seite befindet sich ein umfangreiches Einstellungsfeld mit Optionen für Thema, Schriftart, Hintergrund, Format und mehr. Die verschiedenen Farbverlaufshintergründe sind ästhetisch ansprechend. Benutzer können nach Belieben experimentieren und anpassen, um den individuellen Anforderungen verschiedener Benutzer an den Code-Darstellungsstil gerecht zu werden.

• Hohe Anpassbarkeit:

• Anpassung von Code-Details: Schriftart, Schriftgröße, Zeilenabstand, Zeichenabstand und andere Details des Codes können nach Belieben angepasst werden. Zudem können verschiedene Code-Hervorhebungsstile ausgewählt werden, um den Code klarer und lesbarer zu machen.

• Anpassung des Fensterstils: Unterstützt die Anpassung des Fensterstils, einschließlich Fensterhintergrund, Titelleiste, Fensterschatten und mehr, sodass die Screenshots professioneller wirken.

• Verschiedene Dekorationsoptionen: Unterstützt Zeilendekorationen, Hintergrundrauschen, Hintergrundpartikel und viele weitere Dekorationsoptionen, um die visuelle Wirkung der Code-Screenshots zu verbessern.

• Vielfältige Themen: Enthält eine Reihe vorgefertigter Themen und ermöglicht es Benutzern, eigene Themen zu erstellen. Es sind zahlreiche integrierte Themen und Stile verfügbar, aus denen frei gewählt werden kann, um die am besten zum eigenen Stil passende Code-Farbgebung zu finden.

• Bequem und effizient: Mit wenigen einfachen Schritten lässt sich Code in ein wunderschönes Bild verwandeln, das sich ideal zum Teilen in jedem sozialen Medium eignet und Zeit sowie Mühe spart.

• Unterstützung zum Speichern von Voreinstellungen: Benutzer können die aktuellen Einstellungen als Voreinstellung speichern, um später schnell darauf zugreifen und sie verwenden zu können. Bei zukünftigen Screenshots können häufig verwendete Stile schnell angewendet werden, was Zeit und Mühe spart.

• Einfaches Teilen: Benutzer können die verschönerten Code-Screenshots als PNG- oder SVG-Datei exportieren sowie problemlos in sozialen Medien teilen oder in Blogs einbetten.

• Überlegene Leistung: Mit Vue 3 erstellt, schnell in der Ausführung.

Technische Architektur

• Frontend: Basiert auf Vue.js und bietet umfangreiche Interaktions- und UI-Konfigurationsoptionen.

• Backend: Hauptsächlich von Nuxt.js betrieben, unterstützt dynamisches Routing sowie serverseitiges Rendering.

• Stilbearbeitung: Implementiert durch TailwindCSS, flexibel und effizient. Darüber hinaus stellt das Projekt einen API-Endpunkt unter /healthcheck bereit, der zur Überwachung des Dienststatus genutzt werden kann.

Anleitung zur Nutzung von Chalk.ist

1. Aufruf der Chalk.ist-Website: Besuchen Sie https://chalk.ist/.

2. Auswahl eines Code-Themas: Wählen Sie auf der Website ein gewünschtes Code-Thema aus. Es werden zahlreiche vorgefertigte Themen sowie benutzerdefinierte Themen angeboten, um den Anforderungen verschiedener Benutzer gerecht zu werden.

3. Code einfügen: Fügen Sie den zu verschönernden Code in den Editor ein. Im Editor ist eine Echtzeit-Vorschau des Codes sichtbar.

4. Stil anpassen: Passen Sie den Code-Stil nach Bedarf an, einschließlich Fensterstil, Hintergrundfarbe, Schriftart, Anzeige der Zeilennummern und mehr. Zudem können Rahmen, Schatten, Transparenz und weitere Parameter des Fensters angepasst werden, um den Screenshot ästhetischer zu gestalten.

5. Screenshot exportieren: Klicken Sie nach Abschluss der Anpassungen auf die Schaltfläche „Exportieren", um den verschönerten Code-Screenshot lokal zu speichern. Der Export als PNG- oder SVG-Datei ist möglich.

Bereitstellung

http://chalk.ist/ verwendet Nuxt.js für die Frontend- und Backend-Entwicklung und unterstützt eine schnelle Bereitstellung auf Vercel, was äußerst bequem ist. Wenn Sie es lokal ausführen möchten, führen Sie die folgenden Schritte aus:

1. Projekt klonen: Führen Sie im Terminal den Befehl git clone https://github.com/Idered/chalk.ist aus.

2. Abhängigkeiten installieren: Verwenden Sie den Befehl pnpm install, um die erforderlichen Projektabhängigkeiten zu installieren.

3. Entwicklungsumgebung starten: Führen Sie den Befehl pnpm run dev aus, um Chalk.ist lokal zu starten.

Open-Source-Adresse: https://github.com/Idered/chalk.ist

Verwandte Informationen:

Tool zur Verschönerung von Screenshots