Kirby Highlight plugin with Kirby 2.5.12

[abhijit]

Hi,

I’m using Kirby 2.5.12 on Ubuntu 16.06.

I’ve been breaking my head over syntax highlighting using the kirby-highlight plugin.

These are the things I’ve done till now:

1. Added kirby-pep and kirby-highlight plugins into /site/plugins/ directory
2. Added zenburn.css by adding the following <?php echo css('assets/plugins/kirby-highlight/css/zenburn.css') ?>

into
site/snippets/header.php
3. In site/config/config.php, I added the following:
c::set(‘plugin.kirby-highlight’, true);
c::set(‘plugin.kirby-highlight.languages’, [‘html’, ‘scss’, ‘php’, ‘css’, ‘javascript’]);
c::set(‘plugin.kirby-pep’, true);
c::set(‘plugin.kirby-pep.code_class’, ‘language-%s hljs’);

4. Finally, in a blog article, I put this text:

   ```php

   <?php phpinfo(); ```

My page now shows up this:
<span class=“php”><span class=“hljs-meta”><?php</span> phpinfo();</span>

Any help would be really appreciated.

Thanks

[jimbobrjames]

Somethings not quite right there. The classes look like they are in the wrong place. Im using it on my own site.

Heres a page on my blog with PHP highlighting… do a view source, you should be getting the same output…

<pre><code class="language-php hljs">c::<span class="hljs-built_in">set</span>(<span class="hljs-string">'routes'</span>, array(
  array(
    <span class="hljs-string">'pattern'</span> =&gt; <span class="hljs-string">'uncss.json'</span>,
    <span class="hljs-string">'action'</span>  =&gt; <span class="hljs-function"><span class="hljs-title">function</span></span>() {
      header(<span class="hljs-string">'Content-type: application/json; charset=utf-8'</span>);
      <span class="hljs-variable">$pages</span> = site()-&gt;index()-&gt;visible();
      <span class="hljs-variable">$json</span> = array();
      foreach (<span class="hljs-variable">$pages</span> as <span class="hljs-variable">$page</span>) {
          <span class="hljs-variable">$json</span>[] = (string)<span class="hljs-variable">$page</span>-&gt;url();
      }
      <span class="hljs-built_in">echo</span> json_encode(<span class="hljs-variable">$json</span>);
    }
  )
));</code></pre>

https://hashandsalt.com/blog/use-kirby-to-optimise-css-and-javascript

[texnixe]

Have you followed all the instructions to the T, especially these:

• Replace .hljs with [class^="language-"] in the included stylesheet
• Copy it to your assets/css directory and modify it
• Include the styles in your own workflow

Also, try to move the css to your assets/css folder and change the link accordingly.

[abhijit]

Sorry, I’m a noob here.

What does the following mean?

@texnixe

Replace .hljs with [class^="language-"] in the included stylesheet

Where should I be doing this? In which file?

I’ve copied all the CSS files. The zenburn.css is loading

Also, I don’t understand what is meant by this:

@texnixe

Include the styles in your own workflow

I’ve add the backtick marks in the code I want to show with the corresponding language. Is there something else needed to be done?

[texnixe]

@abhijit

Replace .hljs with [class^="language-"] in the included stylesheet

Sorry, I didn’t read closely enough, it looks as if you have to do only one of the things in the list and you have installed Kirby Pep, so that should be ok. Forget the rest.

So, the steps to do are:

In config.php

c::set('plugin.kirby-highlight', true);
c::get('plugin.kirby-highlight.languages', ['html', 'php']);
c::set('plugin.kirby-pep', true);
c::set('plugin.kirby-pep.code_class', 'language-%s hljs');

Code in text file:

```php
<?= $page->children()->visible() ?>
/```

Result:

<pre>
  <code class="language-php hljs">
  <span class="php"><span class="hljs-meta">&lt;?</span>= $page-&gt;children()-&gt;visible() <span class="hljs-meta">?&gt;</span></span>
  </code>
</pre>

[abhijit]

I copied exactly what you mentioned. However when I see the source of the page it shows up like this -
<div class=“text”>
<p>
&lt;span class=“php”&gt;&lt;span class=“hljs-meta”&gt;&lt;?&lt;/span&gt;= $page-&gt;children()-&gt;visible() &lt;span class=“hljs-meta”&gt;?&gt;&lt;/span&gt;&lt;/span&gt; <a href=“http://kirby.localhost:1000/blog/kirby-highlight” class=“article-more”>read more</a>
</p>
</div>

Also, the following line you’ve put c::get. Is that correct? Shouldn’t it be c::set?

@texnixe

c::get(‘plugin.kirby-highlight.languages’, [‘html’, ‘php’]);

Didn’t work either way, though.

Are you using kirby-2.5.12 in your blog?

[texnixe]

Oh, of course it should be c::set, not c::get. What does your plugin folder look like now?
Should look like this:

[abhijit]

That is correct.

I did some digging as well. In the file plugins>kirby_highlight>core>syntax_highlighting.php, the function preg_replace_callback is getting called twice.

The first time, the line is showing as -

<span class="php"><span class="hljs-meta"><?</span>= $page->children()->visible() <span class="hljs-meta">?></span></span>

However, it is also getting called once more, and this time, the output is becoming -

<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"php"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-meta"</span>></span><span class="php"><span class="hljs-meta"><?</span></span>= $page->children()->visible() <span <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">hljs</span>-<span class="hljs-title">meta</span>">?></span></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>

I haven’t figured out why that is happening though.

[jimbobrjames]

@abhijit

Are you using kirby-2.5.12 in your blog?

Yes, however I haven’t updated the highlight plugin in a while, i’m running version 0.3.0-beta without issue on 2.5.12.

Edit: I just updated the plugin to the most recent, and it works fine.

[texnixe]

What other plugins have you installed? Maybe something is interfering

Do you also declare the language on the fenced code block? At least in your example above you do. In my test it didn’t work without the language “code” after the three opening. backticks.

I also tested with the latest plugins and Kirby versions.

[jimbobrjames]

I just noticed that i had not set PHP as one of the languages in my config:

c::set('plugin.kirby-highlight.languages', ['html', 'php', 'scss', 'css', 'bash', 'json', 'js']);

But it still got the right classes on on the code block. Its getting highlighted slightly differently now that I have added it to the config.

Either way, the plugin does work, there must be something interfering.

Have you tried it with a clean copy of the starter kit with only the highlight plugin installed? I would keep adding plugins one at a time to see which one breaks it.

@S1SYPHOS Do you have any ideas on this? do you know anything that conflicts with your plugin?

[abhijit]

Yes. I retried with a clean install.

First with only kirby-highlight plugin. And then added kirby-pep. The output is the same.

Plugins:

Text:

Source of page:

My config has:
c::set(‘plugin.kirby-highlight’, true);
c::set(‘plugin.kirby-highlight.languages’, [‘html’, ‘php’]);
c::set(‘plugin.kirby-pep’, true);
c::set(‘plugin.kirby-pep.code_class’, ‘language-%s hljs’);

Maybe I’m doing something wrong and not able to see it?

Also, do I need to modify some template?

[texnixe]

So you tried this in a completely. fresh Starterkit without any plugins? Very strange.

What is your environment, which PHP version have you installed?

[abhijit]

This is happening in both PHP 7.1.0 and PHP 7.2.9

Are you sure I don’t need to modify any templates?

If it’s working for you, can you compare the templates with the starterkit templates and see if I need to make any additional changes?

[texnixe]

As long as you use the kirbytext method to output the field, there shouldn’t be a problem. But I can check if you provide the file or project

[abhijit]

Ok. I finally figured it out.

In the starterkit, the blog page actually shows the excerpts.

While creating the excerpt, the blog template in site/templates/blog.php has this -

 <div class="text">
   <p>
     <?= $article->text()->kirbytext()->excerpt(50, 'words') ?>

Which in turn calls this in kirby/helpers.php

function excerpt($text, $length = 140, $mode = 'chars') {
  if(strtolower($mode) == 'words') {
    $text = str::excerpt(kirbytext($text), 0);

Which in turn calls this in str.php under kirby/vendor/getkirby/toolkit/lib/str.php

  public static function excerpt($string, $chars = 140, $removehtml = true, $rep='…') {
    if($removehtml) $string = strip_tags($string);
    $string = str_replace(PHP_EOL, ' ', trim($string));

What this is doing is stripping the HTML tags from the string.

When I open the blog article directly, it works fine.

James, the reason you’re not facing this on your site is because in your blog the there’s no code being shown in the excerpts.

[jimbobrjames]

Ah, I see. Ok well give my Chopper plugin a try. It’s a replacement for excerpt and it doesn’t strip tags (theres a configurable whitelist of tags to keep).

HashandSalt/chopper

[abhijit]

Thanks. I’ll give that a shot.

[texnixe]

The question is if you really want to include code in your excerpts, if you include a complete code tag in your excerpts, they can get pretty long. For such cases where you are likely to have. code or images or whatever at the very beginning of your articles, I still think that custom intros in a separate field are the better alternative.

[jimbobrjames]

@texnixe

I still think that custom intros in a separate field are the better alternative.

Im actually with you completely on that one. I would rather do it that way to… i built chopper for use as a fallback. I often find myself working on sites with a high number blog posts and making summaries for those is often a pain. I usually set it up to read a summary field first, before using the plugin on the main article if its empty.

Personally I would strip code examples from excerpts.