Forum Discussion

SeanH's avatar
SeanH
Guide
11 years ago

Is there an option to use markdown syntax or any options for enhanced code syntax highlighting?

Is there an option to use markdown syntax or any options for enhanced code syntax highlighting? This is in addition to the basic option in the html editor to highlight code.

  • Hi ,

     

    Just a suggestion. One of the reasons for the time taken for page load , could be because you are including the library on load , inside the if condition.

    Instead , if you could include the file at the header (<script src="pretty.js">) , and add the class after checking the pagename , that might save some time in page load.

     

    Thanks for the idea though.

     

    Thanks,

    Sam

  • AdamN's avatar
    AdamN
    11 years ago

    Hi iftomkins,

     

    According to the Prettify documentation, there is an autoload parameter you can set to false when loading the script file. You can then call "prettyPrint()" later to do the syntax highlighting. This should allow you to pre-load the script and then run the highlighting after the content has loaded and you've applied the "prettyprint" class.

     

    See the Auto-Loader and Serving your own JS & CSS sections of their documentation for more information.

     

    I hope this helps!

  • UPDATE: Turns out I could not get this to work via Google's CDN. The prettyPrint() function gave an "undefined" error. To fix it, I downloaded the files, and emailed them to Lithium support to upload them to our assets library, and then loaded the normal prettify.js file in the <head>, instead of prettify_run.js.

     

    In the head section: 

    <script type="text/javascript" src="/html/assets/prettify.js"></script>

     In the hitbox section: 

     <#if page.name?lower_case == "forumtopicpage" || page.name?lower_case == "replypage">
    jQuery("#lia-body .lia-content .lia-message-body-content pre").addClass('prettyprint');
    prettyPrint();
    </#if>

     

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)

    Hi SeanH 

     

    I don't think such option exists out of the box - however it may be possible to achieve that as a customization of the tinyMCE editor. I suggest getting in contact with our Professional Services team in your region, to determine feasibility, and scope out the work.

     

    Thanks,

    • iftomkins's avatar
      iftomkins
      Maven

      We're very interested in code syntax highlighting also. We have a developer community that works with our API on a Google Group, and we'd like to move their discussion to Lithium. We'd like to offer them a more polished experience when sharing code snippets inside the visual editor (using backticks to highlight code would be great, as I've seen elsewhere), or perhaps even editing the source code of the post, as accomplished by this TinyMCE plugin.

       

      We won't able to reach out to Professional Services about this feature, as we've already committed quite a few resources to our initial investment in Lithium. So, any suggestions for accomplishing this would be much appreciated. For example, if we find a plugin for TinyMCE, can we integrate it with our Lithium instance?

       

      Thanks!

      Alan

      • PaoloT's avatar
        PaoloT
        Lithium Alumni (Retired)

        Hi iftomkins 

         

        you can still reach out to Professional Services to get a feasibility assessment / estimate of effort of integrating a TinyMCE plugin such as CodeMirror. This will tell you if what you are asking for is possible, in first instance, and what is the real effort involved if you were to proceed with such customization, and any possible pitfalls / drawbacks.

         

        From a purely technical standpoint, we recently upgraded the TinyMCE editor to v4.0.18 (see the release notes) and as such it may be possible to integrate the plugin.

         

        Thanks,

  • I did some research myself on this. Community appears to use TinyMCE. TinyMCE supports plugins such as Code Sample . Code Sample gives you access to Prism JS syntax highlighter. https://prismjs.com/

    So can the people who know the platform tell me if these pieces will work on community?