No highlightjs JS/CSS files are added to the pages

Created on 20 April 2024, 7 months ago
Updated 29 April 2024, 7 months ago

Problem/Motivation

The highlightjs_input_filter module does not add the required javascript and css library to the pages once i enabled the module after installing it in Drupal 10.2.4

Steps to reproduce

  • Install/Enable the module
  • Enable the copy button and choose a theme through /admin/config/content/highlightjs_input_filter
  • Tick the 'Highlight code using highlight.js' filter in 'Full html' text format(/admin/config/content/formats/manage/full_html).
  • Added a sample html code in the page content and save the page
  • No CSS classes are added to the pre tag

After debugging the page source, i have found that no highlightjs JS/CSS files are not added to the page.
Anything more needs to be configured ?

Thanks

πŸ’¬ Support request
Status

Closed: works as designed

Version

1.1

Component

Code

Created by

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

Comments & Activities

  • Issue created by @shinkula
  • πŸ‡ΊπŸ‡ΈUnited States nmangold United States

    Hi @shinkula, can you verify if changing the HTML code block to XML will add the JS/CSS?

    Also, verify if it works for you with another language, such as PHP? Try placing only a PHP block of code in the page content.

    I believe this is a duplicate of https://www.drupal.org/project/highlightjs_input_filter/issues/3401537 πŸ› Non aliased languages fail to import and prevent Copy plugin from loading Needs review

    HTML is a non-aliased language within the Highlight JS library. Use XML instead. I am working to come up with a better solution.

  • Hi @nmangold I checked again with XML and PHP block but it does not make any differences. The main issue is, Drupal unable to import necessary highlightjs JS/CSS files in the pages to make it work.

    However, if i manually import the highlightjs JS/CSS libraries by configuring the *.libraries.yaml file everything works as expected.

    highlightjs:
      version: 1.0.0
      js:
        /libraries/highlightjs/highlight.min.js: {}
        /libraries/highlightjs/highlightjs-copy.min.js: {}
        /libraries/highlightjs/invoke-highlight.js: {}
    
      css:
        component:
          /libraries/highlightjs/highlightjs-copy.min.css: {}
          /libraries/highlightjs/default.min.css: {}
  • πŸ‡ΊπŸ‡ΈUnited States nmangold United States

    @shinkula, I tested the module against Drupal 10.2.4 specifically using the steps you outlined to reproduce. Also, I am using it on several sites, and I know it does work as expected.

    So, I am trying to figure out what is the scenario that does not work correctly for you. Have you tested against a vanilla Drupal install?

    Can you debug what is happening in the file at web/modules/contrib/highlightjs_input_filter/src/Plugin/Filter/HighlightJs.php? The libraries are attached dynamically. Also, view web/modules/contrib/highlightjs_input_filter/js/highlightjs_input_filter.js to see how the language and copy button scripts are registered with hljs.

    Unfortunately, I will need more information about how to reproduce the problem you are experiencing.

  • Hi @nmangold , I tested highlightjs input filter in a separate installation of Drupal 10.2 and it worked.
    I am not sure why the same steps does not include necessary highlightjs JS/CSS files in the staging site.
    Since the site is staging, i don't have too much options for debugging.
    I will let you know about debug details whenever i get a chance to do so.
    Thanks

  • Status changed to Closed: works as designed 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States nmangold United States

    Since this issue cannot be reproduced using a vanilla Drupal installation, it seems this is specific to your project. I am closing this issue. Feel free to add more details when those are available. Thanks.

Production build 0.71.5 2024