Code Block Features

July 19th, 2023 - Last updated: April 4th, 2024

Code Block Features!

A page to show different code-related markdown features not shown in the Markdown Crash Test.

Code Highlighting

Line highlighting and focusing:

echo "We're highlighting line 1 and 2";
echo "And focusing line 3";

Git-like diffing:

+ echo "We're adding this line";
- echo "And deleting this line";

HTML Parsing

While markdown natively accepts passing in HTML elements; I like the added benefits of wrapping the code in code blocks to get syntax highlighting in my editor.


<p style="color: red;">Green.</p>

Parsed HTML:


Blade Parsing

Blade parsing done inside of the markdown allows for more complex components embedded in my markdown pages. I followed the tutorial on Aaron Francis' page for safe markdown blade rendering.

How the markdown looks:

blade +parse
<x-category-list :categories="['Coding', 'Photography']"></x-category-pill>

The result:

Local Image Parsing

A local image will change paths based on if I am working in a dev environment or if the app is in production. I would also like to provide my images to the user in .webp format when a browser accepts it, otherwise providing them in their base format. The image directly below is rendered using [!image:20](!image:20).

brief description

It's also possible to have the image work as a link to a local or external site by doing: [!image:2](url@blog) or [!image:2](web@

Local Link (Blog) Web Link (Google)

To achieve this I wrote a custom parser for the League Commonmark Laravel package.

namespace App\Markdown\Image;

use League\CommonMark\Extension\ExtensionInterface;
use League\CommonMark\Environment\EnvironmentBuilderInterface;

class LocalImageRendererExtension implements ExtensionInterface
    public function register(EnvironmentBuilderInterface $environment) : void
        $environment->addInlineParser(new LocalImageParser, 100);
        $environment->addRenderer(LocalImage::class, new LocalImageRenderer);
namespace App\Markdown\Image;

use League\CommonMark\Parser\Inline\InlineParserInterface;
use League\CommonMark\Parser\Inline\InlineParserMatch;
use League\CommonMark\Parser\InlineParserContext;

class LocalImageParser implements InlineParserInterface
    public function getMatchDefinition() : InlineParserMatch
        return InlineParserMatch::regex('\[!image:([^\]]*)\]\(([^)]*)\)');

    public function parse(InlineParserContext $inlineContext) : bool
        $cursor = $inlineContext->getCursor();

        $subMatches = $inlineContext->getSubMatches();

        $links = explode('@', $subMatches[1]);

        if (count($links) < 2) {
            $inlineContext->getContainer()->appendChild(new LocalImage($subMatches[0]));
        } elseif ($links[0] == 'url' || $links[0] == 'web') {
            $inlineContext->getContainer()->appendChild(new LocalImageLinked($subMatches[0], $links[0], $links[1]));
        } else {
            return false;


        return true;        
@props(['image' => [], 'imageClass' => 'object-cover w-full h-auto min-h-full md:w-[22vw] md:h-[22vw] float-left']);

{{-- Image --}}
    <source srcset="{{ asset( $image -> img_path . '.webp' ) }}" type="image/webp">
    <source srcset="{{ asset( $image -> img_path . '.' . $image -> img_path_end) }}" type="image/{{ $image -> img_path_end }}">
    <img class="{{ $imageClass }}" src="{{ asset( $image -> img_path . '.' . $image -> img_path_end ) }}" alt="{{ $image -> alt_text }}">

{{-- Image: Caption --}}

An image of Rhino 7 icons

Blog Image