johannschopplich / kirby-highlighter Goto Github PK

View Code? Open in Web Editor NEW

18.0 18.0 3.0 1.17 MB

🌐 Server-side syntax highlighting for the code block & KirbyText

Home Page: https://kirbyseo.com

License: MIT License

PHP 100.00%

kirby kirby-cms kirby-plugin kirby-theme

kirby-highlighter's Introduction

Hi, I’m Johann. I work somewhere in between development and design —
A JavaScript one-trick pony with an aesthetic sense.

Projects

My current focus is on the Nuxt and Vue development experience.

Multi-Framework

unlazy: 🪧 Universal lazy loading library for placeholder images leveraging native browser APIs

Nuxt.js & Vue.js

@nuxtjs/plausible: 🎟️ Plausible Analytics integration for Nuxt
nuxt-api-party: 🐬 Securely connect to any API with a server proxy and generated composables
nuxt-prepare: 🦎 Run initialization steps at build time
nuxt-kql: 🫧 Kirby's Query Language API for Nuxt
nuxt-gtag: 🔸 Google Tag integration for Nuxt: Google Analytics, Google Ads and more
vue-stickers: 🍦 One component, multiple fancy sticker variants
@byjohann/vue-i18n: 🌐 Lightweight internationalization plugin for Vue

Tooling

@unocss/cli: 🎨 The CLI for UnoCSS. A perfect fit for traditional backends.
nitro-test-utils: 🧪 Testing environment and utilities for Nitro
pdfjs-serverless: 🪭 Serverless build of PDF.js for Deno, workers, and other nodeless environments
kirbyup: 🆙 Official bundler for Kirby Panel plugins

Libraries

unpdf: 📄 Utilities to work with PDFs in Node.js, browser and workers
tokenwise: 📐 GPT token estimation and context size utilities without a full tokenizer
apiverse: ✴️ Unified, pluggable API client management for ofetch, route building and typed OpenAPI clients

Demos / Templates / App Starters

cacao-kit-frontend: 🍫 Best practice Nuxt and KQL starter for your headless Kirby CMS
kirby-headless-starter: 🦭 Headless Kirby starter – KQL, Express-esque middlewares & more
kirby-nuxt-starterkit: 💚 Kirby's sample site – ported to Nuxt 3 and KirbyQL

Kirby Plugins

Commercial

kirby-live-preview: 🪩 Real-time page preview in the Kirby Panel
kirby-seo-audit: 🏃 State-of-the-art SEO analysis for Kirby CMS
kirby-copilot: 🪁 Your everyday AI companion for the Kirby Panel

Open Source

⭐️ kirby-content-translator: 🌐 Kirby Panel plugin to translate content at once with DeepL or other services
kirby-headless: 🦭 Kirby, but headless only – bearer token, Express-esque middlewares & more
kirby-algolia-docsearch: 🔦 Index and search your Kirby site with Algolia DocSearch
kirby-serp-preview: 🔍 Kirby Panel plugin for search engine result page previews
kirby-punctuation-section: ✒️ Insert punctuation marks into your text with a single click

kirby-highlighter's People

Contributors

Stargazers

Watchers

Forkers

ro-ka

kirby-highlighter's Issues

Plugin mangles characters like `➜` and `▕`

The characters ➜ and▕ are mangled when plugin is active as âžœ and â–•.

Other characters possibly affected, those are just the ones I've encountered.

Add support for code blocks

Is it possible to activate it for code blocks as well?

Fallback for unknown language types

If I set the language type to something unknown (in my case "Plain text", which is the default) for kirby-highlighter (in a block) it returns an error message

Block error: "Unknown language: "text"" in block type: "code"

I would expect instead a fallback to plain code box without specific styling except for dark background and white text.

Error when enabling autodetect

Somehow this appears. Most of my code blocks are explicit, it works then. Any idea on why this crashes? I have multiple code blocks in post.

Exclude kirby-highlighter in komments

I use the komments plugin from @mauricerenck and there seems to be a comment in queue with some code snippets and this conflicts with kirby-highlighter:

Line numbering support and language name

Hey Johann,

Thank you for this great plugin !

I was looking for an easy solution to add line count and language name to my code blocks and on the highlight.php repo and I found an issue giving the following solution :

$highlightedCode = '...';
$lines = preg_split('/\R/', $highlightedCode);
$output = '<span class="code-line">' . implode("</span>\n<span class=\"code-line\">", $lines) . '</span>';

So I edited the HighlightAdapter.php file

added 2 lines for the line numbering

$lines = preg_split('/\R/', $highlightedCode->value);
$highlightedCode = '<span class="code-line">' . implode("</span>\n<span class=\"code-line\">", $lines) . '</span>';

edited 1 line for the language name

$codeNode->appendXML('<code data-language="'. $language.'">' . $highlightedCode . '</code>');

Both modifications don't change the default look (I haven't run the tests) and with some CSS it allows to easily display line number and language name in code blocks.

pre.hljs {
  line-height: 1.5;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  counter-reset: line;
}

pre.hljs > code::before {
  content: attr(data-language);
  float: right;
  color: gray;
}

pre.hljs .code-line {
  counter-increment: line;
}

pre.hljs .code-line::before {
  content: counter(line);
  display: inline-block;
  margin-right: 1rem;
  color: gray;
  opacity: 0.5;
}

I wanted to share the info, but I can create a pull request if you like.

Have a great day,
Robin

readme doesn't explain how to use included stylesheets

I really appreciate this plugin! But I was only able to get it work by moving a stylesheet into my standard assets folder. It would be good to include an example of how to link to a css file in the plugin folder! Thank you for your work either way!

Only the first code block is highlighted

When adding multiple explicit code blocks to a site, only the first is highlighted. Logging out the $element and the $codeElement in HighlightAdapter.php, the $codeElement is always the same (the first one).

This may also be the reason, why #1 crashes as it is maybe trying to delete a code block that isn’t there.

Any ideas? Usage of DOMXPath->evaluate() looks good to me.

Add compatibility with Kirby Twig plugin

I would like to use your plugin with kirby-twig, unfortunately I have a fatal error when running.

Environment:

PHP 8.1
Kirby 3.6.4
amteich/kirby-twig 4.1.6

Error:

Whoops \ Exception \ ErrorException (E_ERROR)
During inheritance of DOMDocument: Uncaught Whoops\Exception\ErrorException: Return type of KirbyExtended\HTML5DOMDocument::saveHTML(?DOMNode $node = null, bool $entities = false) should either be compatible with DOMDocument::saveHTML(?DOMNode $node = null): string|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in C:\kirby\src\plugins\kirby-highlighter\classes\KirbyExtended\HTML5DOMDocument.php:73 Stack trace: #0 C:\kirby\vendor\composer\ClassLoader.php(571): Whoops\Run->handleError(8192, 'Return type of ...', 'C:\\kirby...', 73) #1 C:\kirby\vendor\composer\ClassLoader.php(571): include() #2 C:\kirby\vendor\composer\ClassLoader.php(428): Composer\Autoload\includeFile('C:\\kirby...') #3 C:\kirby\src\plugins\kirby-highlighter\extensions\hooks.php(9): Composer\Autoload\ClassLoader->loadClass('KirbyExtended\\H...') #4 [internal function]: Kirby\Cms\App->{closure}('<p>\xC2\xA9 Site...') #5 C:\kirby\vendor\getkirby\cms\src\Toolkit\Controller.php(50): Closure->call(Object(Kirby\Cms\App), '<p>\xC2\xA9 Site...') #6 C:\kirby\vendor\getkirby\cms\src\Cms\Event.php(169): Kirby\Toolkit\Controller->call(Object(Kirby\Cms\App), Array) #7 C:\kirby\vendor\getkirby\cms\src\Cms\App.php(213): Kirby\Cms\Event->call(Object(Kirby\Cms\App), Object(Kirby\Toolkit\Controller)) #8 C:\kirby\vendor\getkirby\cms\src\Cms\App.php(827): Kirby\Cms\App->apply('kirbytext:after', Array, 'text') #9 C:\kirby\vendor\getkirby\cms\config\methods.php(402): Kirby\Cms\App->kirbytext('<p>\xC2\xA9 Site...', Array) #10 C:\kirby\vendor\getkirby\cms\src\Cms\Field.php(78): Kirby\Cms\Core->{closure}(Object(Kirby\Cms\Field)) #11 C:\kirby\vendor\twig\twig\src\Extension\CoreExtension.php(1607): Kirby\Cms\Field->__call('kirbytext', Array) #12 C:\kirby\vendor\twig\twig\src\Environment.php(358) : eval()'d code(156): twig_get_attribute(Object(Twig\Environment), Object(Twig\Source), Object(Kirby\Cms\Field), 'kirbytext', Array, 'any', false, false, false, 59) #13 C:\kirby\vendor\twig\twig\src\Template.php(394): __TwigTemplate_97dbdf1022badedbfc864a46325a7f34->doDisplay(Array, Array) #14 C:\kirby\vendor\twig\twig\src\Template.php(367): Twig\Template->displayWithErrorHandling(Array, Array) #15 C:\kirby\vendor\twig\twig\src\Environment.php(358) : eval()'d code(46): Twig\Template->display(Array, Array) #16 C:\kirby\vendor\twig\twig\src\Template.php(394): __TwigTemplate_69c8c177297fddb406c3d415c7cdc5bd->doDisplay(Array, Array) #17 C:\kirby\vendor\twig\twig\src\Template.php(367): Twig\Template->displayWithErrorHandling(Array, Array) #18 C:\kirby\vendor\twig\twig\src\Template.php(379): Twig\Template->display(Array) #19 C:\kirby\vendor\twig\twig\src\TemplateWrapper.php(40): Twig\Template->render(Array, Array) #20 C:\kirby\vendor\twig\twig\src\Environment.php(277): Twig\TemplateWrapper->render(Array) #21 C:\kirby\src\plugins\kirby-twig\src\classes\Environment.php(261): Twig\Environment->render('home.twig', Array) #22 C:\kirby\src\plugins\kirby-twig\src\classes\Template.php(114): amteich\Twig\Environment->renderPath('home.twig', Array, true) #23 C:\kirby\vendor\getkirby\cms\src\Cms\Page.php(1061): amteich\Twig\Template->render(Array) #24 C:\kirby\vendor\getkirby\cms\src\Cms\App.php(725): Kirby\Cms\Page->render() #25 C:\kirby\vendor\getkirby\cms\src\Cms\App.php(1145): Kirby\Cms\App->io(Object(Kirby\Cms\Page)) #26 C:\kirby\public\index.php(23): Kirby\Cms\App->render() #27 C:\kirby\vendor\getkirby\cms\router.php(14): require('C:\\kirby...') #28 {main}

Stack frames (3)
2
Whoops\Exception\ErrorException
…\src\plugins\kirby-highlighter\classes\KirbyExtended\HTML5DOMDocument.php5
1
Whoops\Run handleError
…\vendor\filp\whoops\src\Whoops\Run.php486
0
Whoops\Run handleShutdown
[internal]0
C:\kirby\src\plugins\kirby-highlighter\classes\KirbyExtended\HTML5DOMDocument.php```