Adding Line Numbers to your Markdown Code Blocks

My simple Yii2 blogging website uses this view to display a post:

<?php
use cebe\markdown;
use yii\helpers\Html;

/* @var $this yii\web\View */
/* @var $model common\models\PostRecord */
$this->title = $model->name;
$parser = new markdown\GithubMarkdown();
?>
<div class="post-record-view">
    <h1><?= Html::encode($model->name); ?></h1>
    <div class="panel">
        <?=$parser->parse($model->introduction);?>
    </div>
    <div class="post-content">
        <?=$parser->parse($model->content);?>
    </div>
</div>

Basically, the view takes the 'introduction' and 'content' markdown and spits out the HTML using the cebe\markdown\GithubMarkdown::parse() method. Unfortunately the output is very dreary until you apply some additional styling.

Here is an example of a markdown code block:

And this is what the output would look like after using the GithubMarkdown parser in our view:

We can stylise our code block in our Yii project without making any modifications to the code within the view. It is very simple.

1. Visit https://prismjs.com

2. Click on the "Download" button and on the "Download" page check the compression level is set to "Minified version". Then select your desired theme, languages and plugins to be included in your download. In my project I downloaded the following:

   Theme

   • Coy

   Languages

   • Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS
   • CSS
   • C-Like
   • JavaScript
   • Bash + Shell
   • Markdown
   • PHP
   • PowerShell
   • SQL

   Plugins

   • Line Numbers
   • Copy to Clipboard
   • Show Language
   • Toolbar (This is automatically selected if you have selected the Copy to Clipboard or Show Language plugin)

   If you require additional languages or plugins, you can always revisit this site and update your selection. I would also suggest you comment somewhere in your project which languages and themes are being used.

3. Download the generated JavaScript and CSS files and save in your JavaScript and CSS folder within your project.

4. Update your AppAsset file within your project pointing to the relative location of these two files (below, lines 15 and 18 are referencing our Prism JavaScript and CSS files)

    <?php
    namespace frontend\assets;
       
    use yii\web\AssetBundle;
       
    /**
     * Main frontend application asset bundle.
     */
    class AppAsset extends AssetBundle
    {
        public $basePath = '@webroot';
        public $baseUrl = '@web';
        public $css = [
            'css/site.css',
            'css/prism.css',
        ];
        public $js = [//
            'js/prism.js',
        ];
        public $depends = [
            'rmrevin\yii\fontawesome\CdnFreeAssetBundle',
            'yii\web\YiiAsset',
            'yii\bootstrap\BootstrapAsset',
        ];
    }
   

5. Finally, we change our markdown to include the line-numbers directive.

   

And this will be the result generated by your Yii2 view:

$(document).on('change', '#selectproductform-type', function () {
    if ($(this).val() == TYPE_PRODUCT)
        $('.product-select2-widget').show();
    else
        $('.product-select2-widget').hide();
});