PHPackages hashtagerrors/syntax-highlighter - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. hashtagerrors/syntax-highlighter Abandoned → [bhashkar007/syntax-highlighter](/?search=bhashkar007%2Fsyntax-highlighter)Craft-plugin[Utility & Helpers](/categories/utility) hashtagerrors/syntax-highlighter ================================ The power of Prism syntax highlighting in Craft 1.0.0(6y ago)52036[4 issues](https://github.com/hashtagerrors/syntax-highlighter/issues)[3 PRs](https://github.com/hashtagerrors/syntax-highlighter/pulls)MITJavaScript Since May 21Pushed 4y ago2 watchersCompare [ Source](https://github.com/hashtagerrors/syntax-highlighter)[ Packagist](https://packagist.org/packages/hashtagerrors/syntax-highlighter)[ RSS](/packages/hashtagerrors-syntax-highlighter/feed)WikiDiscussions master Synced 3d ago READMEChangelog (1)Dependencies (1)Versions (2)Used By (0) Syntax Highlighter ================== [](#syntax-highlighter) The power of Prism syntax highlighting in Craft. [![Screenshot](https://camo.githubusercontent.com/0b50917f00ac3bccff13a8103118024876d59614ececcfcf8fd34a14cb7f181c/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2e6a7067)](https://camo.githubusercontent.com/0b50917f00ac3bccff13a8103118024876d59614ececcfcf8fd34a14cb7f181c/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2e6a7067) Requirements ------------ [](#requirements) This plugin requires Craft CMS 3.0.0 or later. Installation ------------ [](#installation) To install the plugin, follow these instructions. 1. Open your terminal and go to your Craft project: ``` cd /path/to/project ``` 2. Then tell Composer to load the plugin: ``` composer require hashtagerrors/syntax-highlighter ``` 3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Syntax Highlighter. Syntax Highlighter Overview --------------------------- [](#syntax-highlighter-overview) **Syntax Highlighter Setting** [Prism](https://prismjs.com) is one of the most popular syntax highlighters that widely used by a lot of blog or websites due to it's ability to do custom builds of the language highlighter and plugins you want to be used. This plugin helps you to similarly build Prism files by selecting desired languages, plugins and theme and then finally bring code highlighter in frontend with a single line of code. Plugin setting page has 178 languages, 8 themes & 4 plugins to select from. Once you choose desired languages, theme and plugins, the plugin builds a JS and CSS file based on the selection which is then automatically fetched when called in frontend. [![Screenshot](https://camo.githubusercontent.com/de95246a7317a936a58ec4cf186cb85a9a6683412790b80aab4dd26a9f5dceb2/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d73657474696e672d706167652e6a7067)](https://camo.githubusercontent.com/de95246a7317a936a58ec4cf186cb85a9a6683412790b80aab4dd26a9f5dceb2/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d73657474696e672d706167652e6a7067) **Syntax Highlighter Field** The plugin adds a `Syntax Highlighter` fieldtype which then displays a block to add your code, select code type, add a caption and specify the lines to be highlighted (if enabled in plugin setting). [![Screenshot](https://camo.githubusercontent.com/a1a153f5781629f43e45d539315cf790298180e4e63139a1d61fce54e5d26a82/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d6669656c64747970652e6a7067)](https://camo.githubusercontent.com/a1a153f5781629f43e45d539315cf790298180e4e63139a1d61fce54e5d26a82/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d6669656c64747970652e6a7067) **Syntax Highlighter Frontend** Using`{{ craft.syntaxHighlighter.render(entry.fieldHandle) }}` in template will show the highlighted code in the frontend. [![Screenshot](https://camo.githubusercontent.com/3462ff2fbf25e5655d0f145738645020c9a831c1b9dd344c9122465d8817e372/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d66726f6e74656e642e6a7067)](https://camo.githubusercontent.com/3462ff2fbf25e5655d0f145738645020c9a831c1b9dd344c9122465d8817e372/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f707269736d2d66726f6e74656e642e6a7067) Configuring Syntax Highlighter ------------------------------ [](#configuring-syntax-highlighter) The Plugin has following settings: **Choose Languages** (Required) Choose the Languages that should be enabled. As this is a required field atleast 1 language needs to be selected. Default `Markup, CSS, C-like, JavaScript, Twig`. **Default Language**The language that would be selected by default in the drop down menu in Code Block Field. Default `Twig` **Theme**The Prism theme you would like to enable in frontend. Default `Prism` **Line Numbers**To enable Line Numbers in the code block. Default Default `Prism` **Line Highlight**To enable Line Highlight in the code block. Default `True` **Show Language**To show language used in the code block. Default `False` **Copy to Clipboard Button**To enable Copy to Clipboard Button Default `True` **Max Height**To set maximum height(in px) of code container to avoid long scrolling in case of long code. Default `500`Leave empty or enter 0 to disable scroll. NOTE: Since this plugin build files every time it's plugin setting is saved, the plugin directory should have **Write** permission. specifically for the`hashtagerrors\syntax-highlighter\src\assetbundles\syntaxhighlighterfrontend` folder. Using Syntax Highlighter ------------------------ [](#using-syntax-highlighter) 1. Select desired languages, theme and plugin from setting page. 2. Create a new field with `Syntax Highlighter` fieldtype. 3. Add field in your section. 4. Copy Paste or write down your code in the textarea of the the Code block, 5. Select language from the Code Type dropdown. 6. Enter line number(s) to be highlighted (if enabled in plugin setting). 7. Add a Caption to show a text on below code block (optional). 8. Use `{{ craft.syntaxHighlighter.render(entry.fieldHandle) }}` in template to show highlighted code. Syntax Highlighter Roadmap -------------------------- [](#syntax-highlighter-roadmap) - Ability to add custom CSS by user. - Prism's [File Highlight](https://prismjs.com/plugins/file-highlight/) plugin. - Prism's Other plugins. New ideas are always welcome. You can post your ideas, requrest or issue [here](https://github.com/hashtagerrors/syntax-highlighter/issues) ### Loved It? [](#loved-it) Show your Love and Support by buying me a cup of Coffee ! [![Buy Me A Coffee](https://camo.githubusercontent.com/175ef05234b10e7132b35fc1a28806d2b8e001de1d9585aeb54054bb6d9143dc/687474703a2f2f7777772e686173687461676572726f72732e636f6d2f6173736574732f75706c6f6164732f6275792d6d652d612d636f666665652e706e67)](https://ko-fi.com/hashtagerrors) Brought to you by [Hashtag Errors](http://hashtagerrors.com) ### Health Score 26 — LowBetter than 43% of packages Maintenance4 Infrequent updates — may be unmaintained Popularity19 Limited adoption so far Community11 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 2551d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/fece97b8284efbeea601ef89f50f1267aaeb8f07c20557bd9ab24a784ca42475?d=identicon)[hashtagerrors](/maintainers/hashtagerrors) --- Top Contributors [![hashtagerrors](https://avatars.githubusercontent.com/u/33387101?v=4)](https://github.com/hashtagerrors "hashtagerrors (5 commits)") --- Tags cmsCraftcraftcmscraft-pluginSyntax highlighter ### Embed Badge ![Health badge](/badges/hashtagerrors-syntax-highlighter/health.svg) ``` [![Health](https://phpackages.com/badges/hashtagerrors-syntax-highlighter/health.svg)](https://phpackages.com/packages/hashtagerrors-syntax-highlighter) ``` ### Alternatives [verbb/navigation Create navigation menus for your site. 90683.7k17](/packages/verbb-navigation)[verbb/formie The most user-friendly forms plugin for Craft. 101372.9k40](/packages/verbb-formie)[verbb/comments Add comments to your site. 13753.1k](/packages/verbb-comments)[verbb/tablemaker Create customizable and user-defined table fields. 40168.8k1](/packages/verbb-tablemaker)[supercool/tablemaker Create customizable and user-defined table fields. 40141.7k](/packages/supercool-tablemaker)[pennebaker/craft-architect CraftCMS plugin to generate content models from JSON/YAML data. 72148.5k5](/packages/pennebaker-craft-architect) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)