Hello Paykit! Code in Posts

November 19, 2024

Words by Matze Schmidbauer

Customizable Code Block Theming in PayKit

In PayKit, code blocks are rendered using Shiki, a fast and visually appealing syntax highlighter. By default, a very basic theme is implemented to ensure clean and readable code highlighting. However, this theming is not set in stone – you can easily modify or enhance it directly in the Code Block component.

Whether you want to adjust colors, change fonts, or apply custom styles for different programming languages, Shiki provides a flexible foundation that makes customization straightforward. This means you can quickly tweak the appearance to align with your branding or personal preferences.

PayKit's integration with Shiki, combined with its basic but modifiable theming, strikes a perfect balance between simplicity and flexibility, giving you the tools to create a professional, polished presentation for your code blocks.

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;
	}