Code Blocks

Make your code blocks work beautifully with your syntax highlither

Code Blocks

Make your code shine regardless of the syntax highlighter you’re using.

Psst… I have a soft spot for PrismJS

Doxter gives you the flexibility to define code blocks in the standard way or fenced. If you fence your code blocks, you can also specify a language identifier. Additionally, you can tell Doxter exactly how to render your code blocks for easy integration with your syntax highlighter.

Standard Code Blocks #

Standard code blocks are defined by one or more levels levels of indentation to denote where the code block begins/​ends

    $greeting = 'Hello';

    echo $greeting;

Fenced Code Blocks #

Fenced code blocks use three or five backticks to denote where the code block begins/​ends. You can also append a language identifier to the first set of backticks.

$greeting = 'Hello';

echo $greeting;

Custom Block Template String #

Since different syntax highlighters require slightly different markup in order to work, Doxter provides a way for you to define exactly how your code should be rendered. This is done by allowing you to define a code block template string that uses the placeholders {languageClass} and {sourceCode}.

Here are a few code block template string examples for the syntax highlighters I use most often. Prism is currently my favorite👍

<!-- HighlightJS -->
<pre><code class="{languageClass}">{sourceCode}</code></php>

<!-- RainbowJS -->
<pre><code data-language="{languageClass}">{sourceCode}</code></php>

<!-- PrismJS -->
<pre><code class="language-{languageClass}">{sourceCode}</code></pre>

[Work In Progress]

Please forgive my typos, partial docs, and overall mess.

I'm working hard to get everything moved over and provide amazing docs for you, my loyal supporter.

—Selvin Ortiz

Let’s Work Together

If you’d like to work together, have questions about any of my Craft CMS Plugins or just want to say hello, send me an email.

Email Me