Prism - syntax highlighting for Magento templates

Nov 10, 2016 JavaScript Magento Prism

In the past I have written a few posts about email template directives for Magento 2.

I like to use Prism as syntax highlighter for my blog. So I have created a small grammer for Magento templates that are used for emails and for the CMS system.

Magento templates in Prism

My option in the past was using Prism with the class language-none for unstyled code. Here a small part of a Magento header.html template as example.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
    </style>
</head>

An other option was the class language-html on the code element.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
    </style>
</head>

This was a bit better, but the highlighting of the Magento template directives was not consistent.

Magento template grammer

I have created a small grammer for Magento templates that works with pretty good with the directive {{ ... }} elements. You can find the grammer in the repository GordonLesti/prism-magento-template. Please note, this syntax highlighting is just for the usage of Prism on your website, not for your WYSIWYG editor. Here are some examples.

Directives

First all known directives without HTML around.

block

{{block
class='Magento\\Framework\\View\\Element\\Template'
area='frontend'
template='Magento_Sales::email/shipment/track.phtml'
shipment=$shipment
order=$order}}

trans

{{trans 'You can check the status of your order by <a href="%account_url">logging into your account</a>.' account_url=$this.getUrl($store,'customer/account/',[_nosid:1]) |raw}}

var

{{var template_styles|raw}}

config

{{config path="general/store_information/phone"}}

template

{{template config_path="design/email/header_template"}}

depend

{{depend company}}{{var company}}{{/depend}}

if

{{if street1}}{{var street1}}
{{/if}}

css

{{css file="css/email.css"}}

inlinecss

{{inlinecss file="css/email-inline.css"}}

layout

{{layout handle="sales_email_order_shipment_items" shipment=$shipment order=$order}}

Embedded in HTML

Here some full example with directives embedded in HTML.

header.html

<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Header"}} @-->
<!--@vars {
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
} @-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
{{var template_styles|raw}}

{{css file="css/email.css"}}
</style>
</head>
<body>
{{inlinecss file="css/email-inline.css"}}

<!-- Begin wrapper table -->
<table class="wrapper" width="100%">
<tr>
<td class="wrapper-inner" align="center">
    <table class="main" align="center">
        <tr>
            <td class="header">
                <a class="logo" href="{{store url=""}}">
                    <img
                        {{if logo_width}}
                            width="{{var logo_width}}"
                        {{else}}
                            width="180"
                        {{/if}}

                        {{if logo_height}}
                            height="{{var logo_height}}"
                        {{else}}
                            height="52"
                        {{/if}}

                        src="{{var logo_url}}"
                        alt="{{var logo_alt}}"
                        border="0"
                    />
                </a>
            </td>
        </tr>
        <tr>
            <td class="main-content">
            <!-- Begin Content -->

shipment_new.html

<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!--@subject {{trans "Your %store_name order has shipped" store_name=$store.getFrontendName()}} @-->
<!--@vars {
"var formattedBillingAddress|raw":"Billing Address",
"var this.getUrl($store, 'customer/account/')":"Customer Account URL",
"var order.getCustomerName()":"Customer Name",
"var order.increment_id":"Order Id",
"var payment_html|raw":"Payment Details",
"var comment":"Shipment Comment",
"var shipment.increment_id":"Shipment Id",
"layout handle=\"sales_email_order_shipment_items\" shipment=$shipment order=$order":"Shipment Items Grid",
"block class='Magento\\\\Framework\\\\View\\\\Element\\\\Template' area='frontend' template='Magento_Sales::email\/shipment\/track.phtml' shipment=$shipment order=$order":"Shipment Track Details",
"var formattedShippingAddress|raw":"Shipping Address",
"var order.shipping_description":"Shipping Description",
"var order.getShippingDescription()":"Shipping Description"
} @-->
{{template config_path="design/email/header_template"}}

<table>
<tr class="email-intro">
<td>
    <p class="greeting">{{trans "%name," name=$order.getCustomerName()}}</p>
    <p>
        {{trans "Thank you for your order from %store_name." store_name=$store.getFrontendName()}}
        {{trans 'You can check the status of your order by <a href="%account_url">logging into your account</a>.' account_url=$this.getUrl($store,'customer/account/',[_nosid:1]) |raw}}
    </p>
    <p>
        {{trans 'If you have questions about your order, you can email us at <a href="mailto:%store_email">%store_email</a>.' store_email=$store_email |raw}}
    </p>
    <p>{{trans "Your shipping confirmation is below. Thank you again for your business."}}</p>
</td>
</tr>
<tr class="email-summary">
<td>
    <h1>{{trans "Your Shipment #%shipment_id for Order #%order_id" shipment_id=$shipment.increment_id order_id=$order.increment_id}}</h1>
</td>
</tr>
<tr class="email-information">
<td>
    {{depend comment}}
    <table class="message-info">
        <tr>
            <td>
                {{var comment|escape|nl2br}}
            </td>
        </tr>
    </table>
    {{/depend}}
    {{block class='Magento\\Framework\\View\\Element\\Template' area='frontend' template='Magento_Sales::email/shipment/track.phtml' shipment=$shipment order=$order}}
    <table class="order-details">
        <tr>
            <td class="address-details">
                <h3>{{trans "Billing Info"}}</h3>
                <p>{{var formattedBillingAddress|raw}}</p>
            </td>
            {{depend order.getIsNotVirtual()}}
            <td class="address-details">
                <h3>{{trans "Shipping Info"}}</h3>
                <p>{{var formattedShippingAddress|raw}}</p>
            </td>
            {{/depend}}
        </tr>
        <tr>
            <td class="method-info">
                <h3>{{trans "Payment Method"}}</h3>
                {{var payment_html|raw}}
            </td>
            {{depend order.getIsNotVirtual()}}
            <td class="method-info">
                <h3>{{trans "Shipping Method"}}</h3>
                <p>{{var order.getShippingDescription()}}</p>
            </td>
            {{/depend}}
        </tr>
    </table>
    {{layout handle="sales_email_order_shipment_items" shipment=$shipment order=$order}}
</td>
</tr>
</table>

{{template config_path="design/email/footer_template"}}