• Resolved Sayontan Sinha

    (@sayontan)


    (I am reposting this, because, for some reason, my original post was held in moderation, then removed. Weird.)

    I am trying to use Prismatic to replace an existing installation of SyntaxHighlighter Evolved, but am facing issues. I read through documentation, Googled, and looked at other posts on this forum, but I am likely missing something obvious.

    Here’s what I did:

    1. Installed and activated Prismatic
    2. Picked “Prism.js” from General → Library
    3. Set the following options in Prism.js
      – Theme = Dark
      – Enable Line Numbers
      – Enable Show Language
      – Code Escaping: Content = Frontend only
      – Code Escaping: Excerpts = Frontend only
      – Code Escaping: Comments = Frontend only
    4. I did not use Gutenberg, and in the Classic Editor I edit raw HTML code in the “Text” tab. I put in:
      <pre><code class="language-html">[[gallery ids='14,15,16']]</code></pre>
      I did not use the Prism.js button because that is not available in the “Text” mode.

    This is my setup:

    1. Theme: Custom, but I tried with Twenty Twenty and GeneratePress
    2. Plugins: Classic Editor and Photonic. I tried disabling Photonic, but there was no change.

    When I look at my page source, I see prismatic/css/styles-blocks.css, but there is no JS or CSS.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jeff Starr

    (@specialk)

    Just a shot in the dark here, but there is no “html” attribute for Prism.js. So try replacing this:

    <pre><code class="language-html">

    ..with this:

    <pre><code class="language-markup">

    That way Prism will recognize the tag and load the required assets, etc.

    You can find a complete list of available languages and their class attribute names on the plugin Installation page.

    Also about this:

    “I did not use the Prism.js button because that is not available in the “Text” mode.”

    With the Plain Text editor, you can click on the pre quicktag to add the required markup:

    <pre><code class="language-"></pre>

    Thread Starter Sayontan Sinha

    (@sayontan)

    As per the PrismJS website, it looks like HTML is accepted, though the use of the word “alias” could be construed both ways.

    So here’s what I tried: on a page I put a single element with class='language-markup', and I left everything else as class='language-html'. Automatically every element with class='language-html' also got correctly rendered. This to me would appear to be a Prismatic bug; the scripts might not be getting enqueued if it sees html, but they are getting enqueued for markup. Once enqueued, prism.js seems to have no issue dealing with html.

    “I did not use the Prism.js button because that is not available in the “Text” mode.”

    With the Plain Text editor, you can click on the pre quicktag to add the required markup:

    That’s alright – I don’t have an issue typing out <pre>. I was just providing the information in case there might be some discrepancy between the behaviour of the Visual vs. Text mode.

    Plugin Author Jeff Starr

    (@specialk)

    Okay let me rephrase that, the Prismatic plugin currently recognizes only the markup attribute (not html, xml, and other markup aliases). I will add the other markup aliases in the next plugin update. Until then, markup can be used to syntax highlight any markup-type language.

    About the Prismatic pre Quicktag, I figured you might be aware, but mention anyway for the sake of any others who stumble upon this forum thread looking for related information. Just want to clarify that the plugin does provide a Quicktag for adding the pre/code markup even in the Classic/Plain-Text Editor.

    Thanks for the feedback on this, @sayontan. Will get the markup aliases added in the next update, will clear up any inconsistencies with asset loading, etc.

    Plugin Author Jeff Starr

    (@specialk)

    Just to follow up with this, the additional markup aliases (html, xml, svg, mathml, ssml, atom, rss) have been added in the next plugin update, should be available soon. Thanks again for reporting, @sayontan.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Cannot seem to get it to work’ is closed to new replies.