remark code in HTML

Author: justinwhall

content/docs/for-developers/tracking-events/event.md

@@ -47,7 +47,7 @@ navigation:
     - [marketing_campaign_name](#marketingcampaignname)
 
 ## 	Events
- 	
+
 Events are generated when email is processed by SendGrid and email service providers. There are two types of events - delivery and engagement events. Delivery events indicate the status of email delivery to the recipient. Engagement events indicate how the recipient is interacting with the email.
 
 Here is a flow of email events:
@@ -181,7 +181,6 @@ Here is an event response that includes an example of each type of event:
 ```
 
  ### 	Delivery events
- 	
 
 Delivery events include processed, dropped, delivered, deferred, and bounce.
 
@@ -195,7 +194,10 @@ Delivery events include processed, dropped, delivered, deferred, and bounce.
       <tr>
          <td><a name="processed"></a>Processed</td>
          <td>Message has been received and is ready to be delivered.</td>
-         <td>```json
+         <td>
+<div class="gatsby-highlight" data-language="json">
+<pre class="language-json" >
+<code class="language-json">
 [
    {
       "email":"example@test.com",
@@ -208,10 +210,13 @@ Delivery events include processed, dropped, delivered, deferred, and bounce.
       "event":"processed",
       "category":"cat facts",
       "sg_event_id":"rbtnWrG1DVDGGGFHFyun0A==",
-      "sg_message_id":"14c5d75ce93.dfd.64b469.filter0001.16648.5515E0B88.0"
+      "sg_message_id":"14c5d75ce93.dfd.64b469.filter0001.16648.5515E0B88.000000000000000000000"
    }
 ]
-```</td>
+</code>
+</pre>
+</div>
+</td>
       </tr>
       <tr>
          <td><a name="dropped"></a>Dropped</td>
@@ -292,7 +297,7 @@ Delivery events include processed, dropped, delivered, deferred, and bounce.
 </table>
 
  ### 	Engagement events
- 	
+
 Engagement events include open, click, spam report, unsubscribe, group unsubscribe, and group resubscribe.
 
 <table class="table">
@@ -421,7 +426,7 @@ Engagement events include open, click, spam report, unsubscribe, group unsubscri
 </table>
 
 ## 	Event objects
- 	
+
 <table class="table">
   <tr>
     <th></th>
@@ -720,7 +725,7 @@ Engagement events include open, click, spam report, unsubscribe, group unsubscri
 </table>
 
  ### 	JSON objects
- 	
+
 - <a name="email"></a>`email` - the email address of the recipient
 - <a name="timestamp"></a>`timestamp` - the <a href="https://en.wikipedia.org/wiki/Unix_time">UNIX timestamp</a> of when the message was sent
 - <a name="event"></a>`event` - the event type. Possible values are processed, dropped, delivered, deferred, bounce, open, click, spam report, unsubscribe, group unsubscribe, and group resubscribe.
@@ -781,7 +786,7 @@ Array:
 - <a name="asmgroupid"></a>`asm_group_id` - The ID of the unsubscribe group the recipient's email address is included in. ASM IDs correspond to the ID that is returned when you create an unsubscribe group.
 - <a name="uniqueargs"></a>`unique_args` or `custom_args`
 ## 	Unique Arguments and Custom Arguments
- 	
+
 Events generated by SendGrid can include [unique arguments]({{root_url}}/for-developers/sending-email/unique-arguments.html) or custom arguments.
 
 <call-out>
@@ -791,7 +796,7 @@ Unique arguments and custom arguments essentially have the same function. Howeve
 </call-out>
 
  ### 	Unique Arguments
- 	
+
 To define and receive unique arguments when sending email with the [SMTP API]({{root_url}}/API_Reference/SMTP_API/index.html) or the [v2 Mail Send endpoint]({{root_url}}/API_Reference/Web_API/mail.html), use the `unique_args` parameter in the X-SMTPAPI header. For example, if you have an application and want to receive custom parameters such as the `userid` and the email `template`, you would submit them with the X-SMTPAPI header, as described [here]({{root_url}}/for-developers/sending-email/unique-arguments.html).
 
 For example, if you include the following unique arguments in your x-smtpapi header for an email sent via the v2 Mail Send endpoint:
@@ -828,7 +833,7 @@ You can create unique arguments with the same words as reserved keys, such as "e
 </call-out>
 
  ### 	Reserved Keys in Unique Arguments
- 	
+
 ```json
 //for this example, assume we're sending to john.doe@sendgrid.com
 {
@@ -843,7 +848,7 @@ You can create unique arguments with the same words as reserved keys, such as "e
 ```
 
  ### 	The resulting webhook call
- 	
+
 ```json
 [
   {
@@ -864,7 +869,7 @@ You'll notice that the unique arguments, "event" and "email", were overwritten b
 </call-out>
 
  ### 	Custom Arguments
- 	
+
 Any custom arguments that you include with an email sent through [v3 Mail Send]({{root_url}}/API_Reference/Web_API_v3/Mail/index.html) gets added to your Event Webhook response.
 
 For example, if you were to include the following custom arguments in a personalization in your payload to the v3 Mail Send endpoint:
@@ -912,7 +917,7 @@ The Event Webhook response:
 For emails sent through our Marketing Campaigns feature, we add Marketing Campaigns specific parameters to the Event Webhook. Both `marketing_campaign_name` and `marketing_campaign_id` are displayed as unique arguments in the event data.
 
  ### 	Example event from a standard (non-A/B test) campaign send:
-   	
+
 ```json
   {
     "category": [],
@@ -930,7 +935,7 @@ For emails sent through our Marketing Campaigns feature, we add Marketing Campai
 ```
 
  ### 	Example event from an A/B Test:
- 	
+
  `marketing_campaign_version` is displayed in the event data for emails sent as part of an A/B Test. The value for `marketing_campaign_version` are returned as `A`, `B`, `C`, etc.
 
 ```json
@@ -952,7 +957,7 @@ For emails sent through our Marketing Campaigns feature, we add Marketing Campai
 ```
 
  ### 	Example event from the winning phase of an A/B Test:
- 	
+
 ```json
 {
   "category": [],
@@ -971,7 +976,7 @@ For emails sent through our Marketing Campaigns feature, we add Marketing Campai
 ```
 
  ### 	Legacy Marketing Email Unsubscribes
- 	
+
 For emails sent through our Legacy Marketing Email tool, unsubscribes look like the following example:
 
 ```json
@@ -1013,7 +1018,7 @@ For emails sent through our Legacy Marketing Email tool, unsubscribes look like
 ```
 
 ## 	Additional Resources
- 	
+
 - [Getting started with the Event Webhook]({{root_url}}/for-developers/tracking-events/getting-started-event-webhook.html)
 - [Troubleshooting the event webhook]({{root_url}}/for-developers/tracking-events/troubleshooting.html)
 - [An Event Webhook case study](https://sendgrid.com/blog/leveraging-sendgrids-event-api/)

gatsby-browser.js

@@ -0,0 +1,10 @@
+exports.onClientEntry = () => {
+  (function () {
+    const path = 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css';
+    const link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    link.setAttribute('href', path);
+    document.head.appendChild(link);
+  }());
+};

gatsby-config.js

@@ -46,6 +46,7 @@ module.exports = {
       resolve: 'gatsby-transformer-remark',
       options: {
         plugins: [
+          'sendgrid-remark-code-in-html',
           'sendgrid-remark-paths',
           {
             resolve: 'gatsby-remark-images',
@@ -78,7 +79,6 @@ module.exports = {
     },
     'gatsby-plugin-sharp',
     'gatsby-plugin-catch-links',
-    // 'gatsby-plugin-sitemap',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {

plugins/sendgrid-remark-code-in-html/index.js

@@ -0,0 +1,12 @@
+const visit = require('unist-util-visit');
+
+module.exports = ({ markdownAST }) => {
+  visit(markdownAST, 'html', (node) => {
+    let remarked = node.value.replace(/```/g, '<pre>');
+    remarked = remarked.replace(/```/g, '</pre>');
+    node.value = remarked;
+    console.log(node);
+  });
+
+  return markdownAST;
+};

plugins/sendgrid-remark-code-in-html/package.json

@@ -0,0 +1 @@
+{}