johannschopplich / kirby-highlighter

🌐 Server-side syntax highlighting for the code block & KirbyText
https://kirbyseo.com
MIT License
20 stars 4 forks source link

Line numbering support and language name #6

Closed rawb1 closed 3 years ago

rawb1 commented 3 years ago

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;
}
Screenshot 2021-04-10 at 12 26 01

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

Have a great day, Robin

johannschopplich commented 3 years ago

Hi Robin,

looks like a great idea. Please open a pull request. I will review then. 🙂

johannschopplich commented 3 years ago

Thanks again for both pull requests! Included in the current v1.4.0 release.