Sign in

Syntax Highlighter with prims js

  • This topic has 4 replies, 2 voices, and was last updated 1 month ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #440
    ajeet

    Hi Bob,

    I am trying to use Prism js in theme. I am following this docs:

    https://getpublii.com/docs/highlight-your-code-syntax-with-prism-js.html

    As suggested in the doc, I downloaded js and css files and put that in the respective folders.

    head.hbs

            {{/checkIf}}
          <link rel="stylesheet" href="{{css "prism.css" }}">
           {{{@headCustomCode}}}
        </head>
        <body>
            {{{@bodyCustomCode}}}

    and in footer.hbs

    {{#if @renderer.previewMode}}
       <script src="{{js "svg-map.js"}}"></script>
       <script src="{{js "svg-fix.js"}}"></script>
    {{/if}}
    <script defer src="{{js "scripts.min.js"}}"></script>
    {{{@footerCustomCode}}}
    {{{ publiiFooter }}}
    </body>
    </html>

    I wanted to use the dark layout ( below) , but I don’t know how how to proceed.

    desired-output

    Also, I don’t see any pop up like Code-css in Format section as shown in the image in the doc here

    View post on imgur.com

    Could you please help me out here.

    Thanks,

    Ajeet

     

     

    #443
    BobBob
    Support

    Hi Ajjet,

    Just follow the instructions, everything is described in detail https://getpublii.com/docs/highlight-your-code-syntax-with-prism-js.html

    Your example does not contain the prism.js file, this one must be added to the footer section.  To have a popup with a list of coding languages you have to add them to the config.json file.

    The” dark layout” was created by me and is available and delivered only with the following themes: Documentation and ProDocs.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #445
    ajeet

    Sorry,

    I did add the code in footer, pasted it wrongly.

    View post on imgur.com

    View post on imgur.com

    I did not add the languages in the config file. I have added now

    View post on imgur.com

    But the pop is still not there.

    View post on imgur.com

    AM I missing something ????

     

    TIA.

    Ajeet

     

     

    #446
    BobBob
    Support

    Use FORMATS select, not the Code.

    screenshot-2019-10-11-o-18.45.37

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #449
    ajeet

    Yes, I added the labels at the wrong place in config file. I had to add under  here :

    “customElements”: [ ]
    It works.
    Thanks so much
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Syntax Highlighter with prims js’ is closed to new replies.