Code Block Features

Code Block Features!

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

• Code Highlighting
• HTML Parsing
• Blade Parsing
• Local Image Parsing

Code Highlighting

Line highlighting and focusing:

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

Git-like diffing:

<?php
+ 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.

Raw HTML:

<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](http://127.0.0.1:8000/!image:20).

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@https://google.com)

Local Link (Blog)	Web Link (Google)

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

App\Markdown\Image\LocalImageRendererExtension.php

<?php
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);
    }
}

App\Markdown\Image\LocalImageParser.php

<?php
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;
        }

        $cursor->advanceToEnd();

        return true;        
    }
}

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

{{-- Image --}}
@fragment('image')
<picture>
    <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 }}">
</picture>
@endfragment

{{-- Image: Caption --}}
[!image:41](http://127.0.0.1:8000/!image:41)