Code highlighting test post. Using syntax highlighting plugin for testing this example out.

This function adds in the basic stylings that are common across all 'H' Header Elements

CLIENT SIDE DEBRIEF

Having gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.

PHIKI PHP Highlighting

Getting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js. In order to call it from a Blade template, I made a quick helper that calls Phiki for me.

import Prism from 'prismjs';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-docker';
...
import 'prismjs/components/prism-php';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/themes/prism-okaidia.css';

Prism.manual = true;
Prism.highlightAll();

Comments

Add Comment

TYPE: code

Statamic\Eloquent\Entries\Entry {#2454 // vendor/statamic/cms/src/Modifiers/CoreModifiers.php:622
  #id: "1aaf2d05-e510-4e70-b0f3-45f60d38c6c1"
  #collection: "blog"
  #blueprint: "blog"
  #date: null
  #locale: "default"
  #afterSaveCallbacks: []
  #withEvents: true
  #template: null
  #layout: null
  -augmentationReferenceKey: null
  -computedCallbackCache: Illuminate\Support\Collection {#2464
    #items: []
    #escapeWhenCastingToString: false
  }
  -siteCache: Statamic\Sites\Site {#1182
    #handle: "default"
    #config: array:3 [
      "name" => "Laravel"
      "url" => "/"
      "locale" => "en_US"
    ]
    #rawConfig: array:3 [
      "name" => "{{ config:app:name }}"
      "url" => "/"
      "locale" => "en_US"
    ]
  }
  #withComputedData: true
  #data: Illuminate\Support\Collection {#2460
    #items: array:12 [
      "tags" => array:1 [
        0 => "code"
      ]
      "a_o_i" => "tech-news"
      "title" => "Code highlighting test post. Using syntax highlighting plugin for testing this example out."
      "author" => 1
      "content" => """
        # CLIENT SIDE DEBRIEF\n
        Having gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.\n
        \n
        ## PHIKI PHP Highlighting\n
        \n
        Getting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js.  In order to call it from a Blade template, I made a quick helper that calls Phiki for me.\n
        \n
        ```javascript\n
        import Prism from 'prismjs';\n
        import 'prismjs/components/prism-markup-templating';\n
        import 'prismjs/components/prism-bash';\n
        import 'prismjs/components/prism-css';\n
        import 'prismjs/components/prism-docker';\n
        ...\n
        import 'prismjs/components/prism-php';\n
        import 'prismjs/plugins/line-numbers/prism-line-numbers.js';\n
        import 'prismjs/plugins/line-numbers/prism-line-numbers.css';\n
        import 'prismjs/themes/prism-okaidia.css';\n
        \n
        Prism.manual = true;\n
        Prism.highlightAll();\n
        ```\n
        """
      "post_type" => "code"
      "sub_title" => "This function adds in the basic stylings that are common across all 'H' Header Elements"
      "main_color" => "primary"
      "updated_by" => 1
      "code_example_page" => "https://highlightjs.org/"
      "code_download_link" => "https://highlightjs.org/"
      "updated_at" => 1746733992
    ]
    #escapeWhenCastingToString: false
  }
  #supplements: Illuminate\Support\Collection {#2459
    #items: []
    #escapeWhenCastingToString: false
  }
  #initialPath: null
  #published: true
  #selectedQueryColumns: null
  #selectedQueryRelations: []
  #original: array:18 [
    "collection" => "blog"
    "locale" => "default"
    "origin" => null
    "slug" => "code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
    "date" => null
    "published" => true
    "path" => "/home/forge/huement.com/content/collections/blog/code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out.md"
    "tags" => array:1 [
      0 => "code"
    ]
    "a_o_i" => "tech-news"
    "title" => "Code highlighting test post. Using syntax highlighting plugin for testing this example out."
    "author" => 1
    "content" => """
      # CLIENT SIDE DEBRIEF\n
      Having gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.\n
      \n
      ## PHIKI PHP Highlighting\n
      \n
      Getting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js.  In order to call it from a Blade template, I made a quick helper that calls Phiki for me.\n
      \n
      ```javascript\n
      import Prism from 'prismjs';\n
      import 'prismjs/components/prism-markup-templating';\n
      import 'prismjs/components/prism-bash';\n
      import 'prismjs/components/prism-css';\n
      import 'prismjs/components/prism-docker';\n
      ...\n
      import 'prismjs/components/prism-php';\n
      import 'prismjs/plugins/line-numbers/prism-line-numbers.js';\n
      import 'prismjs/plugins/line-numbers/prism-line-numbers.css';\n
      import 'prismjs/themes/prism-okaidia.css';\n
      \n
      Prism.manual = true;\n
      Prism.highlightAll();\n
      ```\n
      """
    "post_type" => "code"
    "sub_title" => "This function adds in the basic stylings that are common across all 'H' Header Elements"
    "main_color" => "primary"
    "updated_by" => 1
    "code_example_page" => "https://highlightjs.org/"
    "code_download_link" => "https://highlightjs.org/"
  ]
  #origin: null
  -cachedKeys: Illuminate\Support\Collection {#3837
    #items: array:12 [
      0 => "tags"
      1 => "a_o_i"
      2 => "title"
      3 => "author"
      4 => "content"
      5 => "post_type"
      6 => "sub_title"
      7 => "main_color"
      8 => "updated_by"
      9 => "code_example_page"
      10 => "code_download_link"
      11 => "updated_at"
    ]
    #escapeWhenCastingToString: false
  }
  #slug: "code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
  #model: Statamic\Eloquent\Entries\UuidEntryModel {#2458
    #connection: "mysql"
    #table: "entries"
    #primaryKey: "id"
    #keyType: "string"
    +incrementing: false
    #with: []
    #withCount: []
    +preventsLazyLoading: false
    #perPage: 15
    +exists: true
    +wasRecentlyCreated: false
    #escapeWhenCastingToString: false
    #attributes: array:13 [
      "id" => "1aaf2d05-e510-4e70-b0f3-45f60d38c6c1"
      "site" => "default"
      "origin_id" => null
      "published" => 1
      "slug" => "code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
      "uri" => "/blog/code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
      "date" => null
      "order" => null
      "collection" => "blog"
      "blueprint" => "blog"
      "data" => "{"tags": ["code"], "a_o_i": "tech-news", "title": "Code highlighting test post. Using syntax highlighting plugin for testing this example out.", "author": 1, "content": "# CLIENT SIDE DEBRIEF\nHaving gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.\n\n## PHIKI PHP Highlighting\n\nGetting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js.  In order to call it from a Blade template, I made a quick helper that calls Phiki for me.\n\n```javascript\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-docker';\n...\nimport 'prismjs/components/prism-php';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.js';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.css';\nimport 'prismjs/themes/prism-okaidia.css';\n\nPrism.manual = true;\nPrism.highlightAll();\n```\n", "post_type": "code", "sub_title": "This function adds in the basic stylings that are common across all 'H' Header Elements", "main_color": "primary", "updated_by": 1, "code_example_page": "https://highlightjs.org/", "code_download_link": "https://highlightjs.org/"}"
      "created_at" => "2025-05-08 19:53:12"
      "updated_at" => "2025-05-08 19:53:12"
    ]
    #original: array:13 [
      "id" => "1aaf2d05-e510-4e70-b0f3-45f60d38c6c1"
      "site" => "default"
      "origin_id" => null
      "published" => 1
      "slug" => "code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
      "uri" => "/blog/code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"
      "date" => null
      "order" => null
      "collection" => "blog"
      "blueprint" => "blog"
      "data" => "{"tags": ["code"], "a_o_i": "tech-news", "title": "Code highlighting test post. Using syntax highlighting plugin for testing this example out.", "author": 1, "content": "# CLIENT SIDE DEBRIEF\nHaving gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.\n\n## PHIKI PHP Highlighting\n\nGetting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js.  In order to call it from a Blade template, I made a quick helper that calls Phiki for me.\n\n```javascript\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-markup-templating';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-docker';\n...\nimport 'prismjs/components/prism-php';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.js';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.css';\nimport 'prismjs/themes/prism-okaidia.css';\n\nPrism.manual = true;\nPrism.highlightAll();\n```\n", "post_type": "code", "sub_title": "This function adds in the basic stylings that are common across all 'H' Header Elements", "main_color": "primary", "updated_by": 1, "code_example_page": "https://highlightjs.org/", "code_download_link": "https://highlightjs.org/"}"
      "created_at" => "2025-05-08 19:53:12"
      "updated_at" => "2025-05-08 19:53:12"
    ]
    #changes: []
    #casts: array:3 [
      "date" => "datetime"
      "data" => "json"
      "published" => "boolean"
    ]
    #classCastCache: []
    #attributeCastCache: []
    #dateFormat: null
    #appends: []
    #dispatchesEvents: []
    #observables: []
    #relations: []
    #touches: []
    +timestamps: true
    +usesUniqueIds: false
    #hidden: []
    #visible: []
    #fillable: []
    #guarded: []
  }
}
                string(89) "code-highlighting-test-post-using-syntax-highlighting-plugin-for-testing-this-example-out"

                string(0) ""

              
                object(Statamic\Auth\Eloquent\User)#7244 (10) {
  ["afterSaveCallbacks":protected]=>
  array(0) {
  }
  ["withEvents":protected]=>
  bool(true)
  ["withComputedData":protected]=>
  bool(true)
  ["original":protected]=>
  array(0) {
  }
  ["selectedQueryColumns":protected]=>
  NULL
  ["selectedQueryRelations":protected]=>
  array(0) {
  }
  ["model":protected]=>
  object(App\Models\User)#7250 (33) {
    ["connection":protected]=>
    string(5) "mysql"
    ["table":protected]=>
    string(5) "users"
    ["primaryKey":protected]=>
    string(2) "id"
    ["keyType":protected]=>
    string(3) "int"
    ["incrementing"]=>
    bool(true)
    ["with":protected]=>
    array(0) {
    }
    ["withCount":protected]=>
    array(0) {
    }
    ["preventsLazyLoading"]=>
    bool(false)
    ["perPage":protected]=>
    int(15)
    ["exists"]=>
    bool(true)
    ["wasRecentlyCreated"]=>
    bool(false)
    ["escapeWhenCastingToString":protected]=>
    bool(false)
    ["attributes":protected]=>
    array(15) {
      ["id"]=>
      int(1)
      ["name"]=>
      string(11) "Derek Scott"
      ["email"]=>
      string(17) "derek@huement.com"
      ["email_verified_at"]=>
      NULL
      ["password"]=>
      string(60) "$2y$12$r5vDRIKabTNgN.HFNrmfpuDdFu85AeZrF5yCr9x5R0N2FE1H/MuvC"
      ["remember_token"]=>
      string(60) "O0KrmnxO4QvukjAH4hLD7k6BdY38wegUYUojK4PPhl2ePHthpPSbEAtLXwuU"
      ["created_at"]=>
      string(19) "2024-10-04 16:45:40"
      ["updated_at"]=>
      string(19) "2025-03-18 14:34:41"
      ["super"]=>
      int(1)
      ["avatar"]=>
      NULL
      ["preferences"]=>
      NULL
      ["last_login"]=>
      string(19) "2025-06-03 17:21:07"
      ["profile_banner_image"]=>
      string(11) "profile.png"
      ["display_name"]=>
      string(11) "Derek Scott"
      ["facebook_link_field"]=>
      NULL
    }
    ["original":protected]=>
    array(15) {
      ["id"]=>
      int(1)
      ["name"]=>
      string(11) "Derek Scott"
      ["email"]=>
      string(17) "derek@huement.com"
      ["email_verified_at"]=>
      NULL
      ["password"]=>
      string(60) "$2y$12$r5vDRIKabTNgN.HFNrmfpuDdFu85AeZrF5yCr9x5R0N2FE1H/MuvC"
      ["remember_token"]=>
      string(60) "O0KrmnxO4QvukjAH4hLD7k6BdY38wegUYUojK4PPhl2ePHthpPSbEAtLXwuU"
      ["created_at"]=>
      string(19) "2024-10-04 16:45:40"
      ["updated_at"]=>
      string(19) "2025-03-18 14:34:41"
      ["super"]=>
      int(1)
      ["avatar"]=>
      NULL
      ["preferences"]=>
      NULL
      ["last_login"]=>
      string(19) "2025-06-03 17:21:07"
      ["profile_banner_image"]=>
      string(11) "profile.png"
      ["display_name"]=>
      string(11) "Derek Scott"
      ["facebook_link_field"]=>
      NULL
    }
    ["changes":protected]=>
    array(0) {
    }
    ["casts":protected]=>
    array(2) {
      ["email_verified_at"]=>
      string(8) "datetime"
      ["password"]=>
      string(6) "hashed"
    }
    ["classCastCache":protected]=>
    array(0) {
    }
    ["attributeCastCache":protected]=>
    array(0) {
    }
    ["dateFormat":protected]=>
    NULL
    ["appends":protected]=>
    array(0) {
    }
    ["dispatchesEvents":protected]=>
    array(0) {
    }
    ["observables":protected]=>
    array(0) {
    }
    ["relations":protected]=>
    array(0) {
    }
    ["touches":protected]=>
    array(0) {
    }
    ["timestamps"]=>
    bool(true)
    ["usesUniqueIds"]=>
    bool(false)
    ["hidden":protected]=>
    array(2) {
      [0]=>
      string(8) "password"
      [1]=>
      string(14) "remember_token"
    }
    ["visible":protected]=>
    array(0) {
    }
    ["fillable":protected]=>
    array(3) {
      [0]=>
      string(4) "name"
      [1]=>
      string(5) "email"
      [2]=>
      string(8) "password"
    }
    ["guarded":protected]=>
    array(1) {
      [0]=>
      string(1) "*"
    }
    ["authPasswordName":protected]=>
    string(8) "password"
    ["rememberTokenName":protected]=>
    string(14) "remember_token"
    ["accessToken":protected]=>
    NULL
  }
  ["roles":protected]=>
  NULL
  ["groups":protected]=>
  NULL
  ["supplements":protected]=>
  NULL
}