Hello PayKit! Code in Posts

November 19, 2024

Geschrieben von Matze Schmidbauer

Anpassbares Code-Block-Design in PayKit

Code-Blöcke in PayKit lassen sich anpassen und werden mit Shiki gerendert, einem schnellen und optisch ansprechenden Syntax-Highlighter. Standardmäßig ist ein ziemlich grundlegendes Design eingebaut, das für klare und gut lesbare Hervorhebungen sorgt. Das Gute daran: Du kannst das Design direkt in der Code-Block-Komponente anpassen oder erweitern, ganz nach deinen Wünschen.

Egal, ob ihr Farben ändern, Schriftarten anpassen oder individuelle Stile für verschiedene Programmiersprachen hinzufügen wollt – Shiki bietet eine robuste Grundlage, die die Anpassung erleichtert. So kannst du das Aussehen schnell anpassen, damit es zu deiner Marke oder deinen persönlichen Vorlieben passt.

Die Integration von Shiki in PayKit, kombiniert mit dem einfachen, anpassbaren Design, bietet eine ideale Mischung aus Benutzerfreundlichkeit und Flexibilität, um deine Code-Blöcke professionell und ansprechend darzustellen.

Code Block:

function getDefaultSrc(media: Media, position: MediaBlockProps['position']): string {
		if (!media.sizes) return media.url;

		const preferredSizes = position === 'thumbnail'
			? ['thumbnail', 'small', 'medium'] as const
			: ['large', 'medium', 'small'] as const;

		for (const size of preferredSizes) {
			if (media.sizes[size]?.url) {
				return media.sizes[size].url;
			}
		}
		return media.url;
	}