Prismjs support

Created on 11 October 2017, about 7 years ago
Updated 12 July 2023, over 1 year ago

Wondering if you'd be interested in using prism too? I'd be willing if possible to write a integration or submodule instead of forking this for prism if possible?

We are using it for d.o so it may be useful for d.o going to d8 in codefilter module.
http://prismjs.com/

Feature request
Status

RTBC

Version

1.0

Component

Code

Created by

🇨🇦Canada joelpittet Vancouver

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States joshua.boltz

    I've enhanced this integration of Prism into the Codesnippet module to allow users to pick and choose from the list of languages which languages they wish to allow/support.

    IMO, this makes this integration/patch more flexible and re-usable.

  • 🇺🇸United States joshua.boltz

    Updated patch with minor, but helpful changes, that fix issues with the dynamic CDN links when using the "Default" Prism style.
    This was causing 404 errors on the CDN requests when using the Default style. The rest of this change is the same as the previous patch that adds the language checkbox selection form.

  • 🇺🇸United States joshua.boltz

    And another patch that does everything from previous 2 patches, but also fixes a typo with "highligherjs" to "highlightjs" in the .module file.
    Hope these patches help someone else fighting with the same issues.

  • 🇺🇸United States joshua.boltz

    The original patch/MR from #12 worked good. I've added a couple patched based from that work, which has greatly improved how I've been needing to integrate this into my build.

    But, one thing that I think is causing some strange issues is around the getting of the Editor instance from within the .module file.

    I think this is due to the Editor instance being readily available from within the CKEditor plugin class, but from the .module file, it's a little trickier to get the editor.

    In codesnippet_ckeditor_css_alter(), the $editor is (somehow) being passed in, which lets it work. I didn't know you could just pass arbitrary data like that into the hook.

    But, other hooks like codesnippet_preprocess_html() and codesnippet_library_info_build(), which rely on the logic from the codesnippet_get_ckeditor() helper function, the $editor instance it finds is not always correct.

    I think this works if there is only one editor/text format at play, but in my case, I have multiple text formats (say full_html and blog_post), and when I'm expecting the settings for full_html, it's actually loaded up blog_post. I think we need a more reliable way of getting the editor instances that are driving the logic of those hooks.

    @joelpittet @kevinquillen cc

  • 🇺🇸United States joshua.boltz

    Fixed another typo. Latest visible patch contains:
    * Language selection checkbox form to control support languages per text format
    * "Default" value fallbacks for asset paths
    * Typo fixes

  • 🇺🇸United States kevinquillen

    Sorry, did not get a chance to look this weekend. Will try to take a look this week.

  • 🇺🇸United States joshua.boltz

    @kevinquillen In testing of the patches, I've noticed this JS error:

    Refused to apply style from 'https://my-local.docksal.site/libraries/codesnippet/lib/highlight/styles/okaidia.css?t=rrixgn' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    

    I think this is because the code in /libraries/codesnippet/plugin.js hasn't accounted for the fact that users can select to use Highlight or Prism with the patch.

    After selecting Okaidia as the PrismJS style I want to use, I see this CSS being added, which it doesn't like:
    https://my-local.docksal.site/libraries/codesnippet/lib/highlight/styles...

    Which seems to be coming from around line 119 of plugin.js:
    // Method is available only if wysiwygarea exists.
    if ( editor.addContentsCss ) {
    editor.addContentsCss( path + 'lib/highlight/styles/' + editor.config.codeSnippet_theme + '.css' );
    }

    I think this needs to be changed to use the PrismJS styles from the CDN, like:
    https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css
    When PrismJS is the selected highlighter.

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States joshua.boltz

    I've attached a new patch that is built on top of #16 patch, but this adjusts what I believe is a critical piece of logic that tells the editor.config which highlight is being used, HighlightJS or PrismJS, based on the selected value from the CKEditor plugin form.

    This simple change should open the door to the JS changes I mentioned in my previous comment to allow us to add a conditional statement and load library-specific things per selected highlighter.

    For instance, if the editor is using HighlightJS, we include highlight.pack.js. If the editor is using PrismJS, we include prism.js from the CDN or local file.

  • 🇺🇸United States joshua.boltz

    The latest patch from https://www.drupal.org/project/codesnippet/issues/2915551#comment-14972594 Prismjs support RTBC combined with the patch I've included in this comment together allow for a much better functioning version of Prism support for Codesnippet. There are still some minor issues, but for the most part, this is working great, at least in our testing on our project.

    In summary, you will need to apply these 2 patches:
    * https://www.drupal.org/files/issues/2023-03-17/2915551-prism-js-language... (Codesnippet module patch)
    * https://www.drupal.org/files/issues/2023-03-31/codesnippet-prism-support... (Patch against the library "drupal-ckeditor-libraries-group/codesnippet")

    The first patch fixes some things, but also provides a configuration form element in the CKEditor plugin form that allows for users to select which languages they wish to support.

    The second patch is an updated plugin.js file that pretty much adds everything Prism into the existing Highlight stuff, so this should allow sites to run using either Prism or Highlight, although it's been mainly tested using Prism in our project, but Highlight was working also for us.

  • 🇺🇸United States weekbeforenext Asheville, NC

    Re-rolled the patch from #20 to apply to the 1.9.0 version.

  • 🇮🇳India tdnshah

    #22 works for me well hence moving to RTBC..
    Thank you @weekbeforenext for the grt work with the patch.

  • Status changed to RTBC over 1 year ago
  • Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
Production build 0.71.5 2024