Filename above the Indented code

is there a plugin in Grav, that can display a label (for example file name) above the code on the page?

Like this:


Really no one knows how to do it? It does not have to be exactly what I placed here, would be enough if it looks like this:

I’m not sure to understand what you’re looking for.
Could you maybe be more specific and explain with more details ?

Thank you, I’m looking for a way to display the code in “Grav” with description.

I can insert the code, as follows:

#!/usr/bin/env python
#some code

but this show only code, I would like find a way for showing code with description for it. Just as in the picture.

I finally did it by changing the css:

.codehead {
        font-family: Consolas;
        text-indent: 6px;
        padding: 2px 0px;

.codehead pre {
        text-indent: 0px;
        margin: 0 ;

and with html:

<div class="codehead">
<pre><code>#!/usr/bin/env python

How it looks like now:

But my question still remains, how to do it better with less work? I just imagine something like:

<code |>
#!/usr/bin/env python

or something similar:

<code description="">
#!/usr/bin/env python
1 Like

Well, as it says, help yourself. I solve it by installing shortcode plugin with settings:

namespace Grav\Plugin\Shortcodes;
use Thunder\Shortcode\Shortcode\ShortcodeInterface;
class StrikeShortcode extends Shortcode
    public function init()
        $this->shortcode->getHandlers()->add('codehead', function(ShortcodeInterface $sc) {
            $codehead = $sc->getParameter('codehead', $this->getBbCode($sc));
            $buffer = $sc->getContent();
            $buffer  = preg_replace( "/(^\n|\n$)/", "", $buffer);
            $str_before = array("<", ">", "&ltp&gt", "&lt/p&gt");
            $str_after  = array("&lt", "&gt", "", "");
            $buffer = str_replace($str_before, $str_after, $buffer);
            return '<pre class="codehead">'.$codehead.'<code>'.$buffer.'</code></pre>';

And in

Heloo world!

It’s not probably the purest solution, but works fine to me. Please, If anyone know about better way, let me know.


1 Like

To paraphrase a proverb:

give a man a fish and you feed him for a day; let him find out himself how to fish and you feed him for a lifetime

You might want to pick your preferred solution and mark it as ‘solution’.