Download the PHP package bogdancondorachi/kirby-code-highlighter without Composer
On this page you can find all versions of the php package bogdancondorachi/kirby-code-highlighter. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download bogdancondorachi/kirby-code-highlighter
More information about bogdancondorachi/kirby-code-highlighter
Files in bogdancondorachi/kirby-code-highlighter
Package kirby-code-highlighter
Short Description Server-side syntax highlighter for Kirby CMS.
License MIT
Homepage https://github.com/bogdancondorachi/kirby-code-highlighter
Informations about the package kirby-code-highlighter
[!NOTE] A server-side syntax highlighter plugin for Kirby CMS, powered by Phiki, that uses TextMate grammars and VS Code themes to generate syntax-highlighted code within Kirby's code block and KirbyText. Also with Shiki implementation for live code block preview inside the Kirby Panel!
✨ Key Features
- ⚡ Performance: Fast and powerful syntax highlighting.
- 🚀 Integration: Works with Kirby's code block and KirbyText.
- 👁️ Panel Preview: Live code preview in the Kirby Panel.
- 🌍 Languages: Over 200+ supported languages.
- 🎨 Themes: Choose from 50+ VS Code themes.
- 🔐 Base64 Support: Handles base64-encoded content.
📦 Installation
Composer
Git Submodule
Manual
Download the plugin and extract it to: /site/plugins/code-highlighter
⚙️ Usage
Kirby Blocks Field
This plugin overwrites the Kirby's native code block, the output will be highlighted automatically.
By default, the code block uses the customize the available languages and themes.
KirbyText
Embed syntax-highlighted code directly in KirbyText fields:
`
Or use the plugin's custom KirbyTag with support for base64-encoded content:
By default, the code tag applies the default theme. However, you can use the theme attribute to specify a different theme for individual code blocks.
🔧 Configuration
All options goes into your config.php
file:
Default Theme
Set the default theme:
Check out the supported themes
Default Language
Set the default language:
Check out the supported languages
Light/Dark Dual Themes
If you use light/dark mode on your website, you can set a default theme for each individual mode:
In this case, you'll need to add one of the CSS snippet's to make it reactive to your site's theme:
Query-based Dark Mode
Class-based Dark Mode
Line Numbering
Enable line numbers in your rendered code blocks:
Customize Languages and Themes Selection
Customize the languages and themes options available in Kirby’s code block:
Explore Supported Languages and Themes
Front-end Block Styling
Further customize the block style to match your site's design. Here's an example:
🙏 Credits
- Ryan Chandler for porting Shiki to PHP via Phiki, which powers this plugin.
- Johann Schopplich for his Kirby Highlighter, which served as base for this project.
📜 License
Bogdan Condorachi