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.
  • samudhraa's avatar
    samudhraa
    11 years ago

    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!

  • iftomkins's avatar
    iftomkins
    11 years ago

    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)
11 years ago

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
    11 years ago

    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)
      11 years ago

      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,

      • iftomkins's avatar
        iftomkins
        Maven
        11 years ago

        I worked to improve the code highlighting on our site this morning by using prettify.js. This is what stackoverflow.com uses. It is very easy to implement, you just need to: 1) add the class "prettyprint" to the <pre> tags that wrap the code. 2) Include a link to the run_pretty.js file.

         

        Here is the snippet I used in my hitbox.

         

         <#if page.name?lower_case == "forumtopicpage" || page.name?lower_case == "replypage" >
        jQuery("#lia-body .lia-content .lia-quilt-forum-message .lia-message-body-content pre").addClass('prettyprint');
        $.getScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js");
        </#if> 

         

        There is a big drawback though. Since this runs at page load, the code highlighting takes several seconds to load.

         

        It would be great if you could add this as default functionality. I've added it as an idea here.