290
Free
Add to project

Product support

Get help in the plugin support forum.

Categories

Syntaxed is OctoberCMS implementation of PrismJS. Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Syntaxed is OctoberCMS implementation of PrismJS. Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Add the syntaxed component to your page and render it with the component tag:

{% component 'syntaxed' %}

The only Component Setting is theme. You can select different themes. All code syntax goes in the CMS markup as shown below:

CSS Highlighted Code

<pre><code class="language-css">div { background-color: gray }</code></pre>

PHP Highlighted Code

<pre><code class="language-php">
    class Person{

        public $name;
        public $age;

        function Person(){
            $this->name = $name;
            $this->age = $age;
        }
    }
</code></pre>

Using Syntaxed with Rainlab Blog Plugin

  1. Add Syntaxed Component to Blog Post (ie. Pages --> Blog --> BlogPost). Just drag and drop component
  2. Create a new Blog Post and add your hightlight code as per example above. Thats all you need to do!

Youtube Video - Adding Syntaxed to Rainlab Blog.

  • Found the plugin useful on 3 Oct, 2017

    Does this depend on bootstrap being available on the frontend?

    I followed the instructions and then the video. I can see that syntaxed is loading inside the page when I inspect (although there is only 1 prism) reference there in a comment.

    I can even see syntax highlighting happening in the blog post editor window but not on my frontend.

    Take a look here. https://www.bradgillap.com/guide/post/road-paint-test

  • author

    Replied on 4 Oct, 2017

    Hi Bradley, Thank you for downloading the plugin. Syntaxed plugin doesn't depend on Bootstrap. Let me investigate what is happening on your page. I will get back to you shortly.

    Update: I checked your site, seems you already figured out the issue. It is displaying correctly now. Happy coding. Silvanus

  • Found the plugin useful on 9 Jan, 2017

    Well, first of all, I found it very useful, but I couldn't figure out a way to make it work with rainlab blog plugin. I actually did exactly as you described, but somehow it works fine when I placed the test code, eg: '<pre><code class="language-css">.img {width: 100%; height: auto; }</code></pre>', directly into markup. Then, when I tried to place this piece of code into blog post content, it just didn't work as expected. I'm sorry if I couldn't make myself clear enough to understand, but i'll really appreciate if you could help me out with this problem.

  • author

    Replied on 11 Jan, 2017

    Hi Frank, Sorry about the issues you are experiencing regarding syntaxed with rainlab blog plugin. Let me test this, I will get back to you ASAP.

    Ok Frank, it works please checkout this video https://www.youtube.com/watch?v=T8KncUZwFVE

  • Found the plugin useful on 18 Sep, 2016

    Copied the docs and works straight out the box. Good plugin

  • Found the plugin not useful on 16 Jul, 2016

    Lack of documentation, I've tired but not succeed to implement it.

  • author

    Replied on 16 Jul, 2016

    Hi Sachin, sorry to hear that you have not been able to get this plugin working. The plugin has been installed in over 45 projects successfully. Can you please tell me where you are having issues so that I can help you? By just saying you can't get it to work it doesn't give me much to go on help you to get this to work. You can start question on the support forum or I can be reached on silvanus.matiku at gmail dot com or twitter @silvanusmatiku. Happy to help anytime.

  • Found the plugin useful on 16 Jul, 2016

    Hello Can you help me I am using he same theme Vanilla but not able to see the change in frontend, when I create new post into the preview by side display it very nice but on frontend theme Vanilla it is not working, i also added the Syntaxed Component on Blog Page. did I forgot anything?

  • author

    Replied on 16 Jul, 2016

    Hi Prashant, Thank you for your review. Regarding issues with Vanilla theme front end display, I will need to test and get back to you. Have you tried on a different theme?

    UPDATE: Prashant, I have tested the Syntaxed plugin on Vanilla theme is working fine. To troubleshoot please do the following:

    1. Update your October CMS to the latest version
    2. Under Components section make sure you have Syntaxed component.
    3. On your page template, drag and drop syntaxed component to the top of template close to title. Save
    4. Enter your code to highlight. See example in documentation.
    5. That's all. I suspect on the template you didn't have syntaxed component. Any issues please let me know. I will be happy to post a video. Cheers, Silvanus

  • Please login to rate the plugin or write a review.
1.0.1

First version of Syntaxed

Jun 04, 2015