Code block parsing error while using highlight.js

[CX330Blake]

Context

No response

Bug description

The code does not parsed from the ```, here's the photo of wrong parsed rendering.

I do turn pygments off and import the external js/css

markdown_extensions:
    - pymdownx.highlight:
          use_pygments: false
          # anchor_linenums: true
          # line_spans: __span
          # pygments_lang_class: true
          # auto_title: true
    - pymdownx.inlinehilite
    - pymdownx.snippets
    - def_list
    - pymdownx.tasklist:
          custom_checkbox: true
    - mdx_truly_sane_lists
    - pymdownx.superfences:
          custom_fences:
              - name: mermaid
                class: mermaid
                format: !!python/name:pymdownx.superfences.fence_code_format

extra_css:
    - stylesheets/extra.css
    - stylesheets/dracula.css

extra_javascript:
    - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js
    - js/highlight.js

Related links

• Reporting a bug
• Highlight

Reproduction

reproduction.zip

Steps to reproduce

mkdocs serve --dev-addr 0.0.0.0:8000 and see the website

Browser

Other

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting! Markdown parsing an rendering is entirely handled by Python Markdown and Python Markdown Extensions. In this case, I suspect that the pymdownx.highlight extension might be causing trouble, but there might be multiple factors at play. Please take this upstream, since we're only rendering what we got ☺️

[facelessuser]

@CX330Blake pymdownx.highlight supports ```language title="Title" only when using Pygments. Special things like titles are a Pygments feature. To apply general attributes to HTML elements when formatting for non-Pygments, JS highlighters, all classes, ids and options require this form: ```language {#id .class attr="value"}, and what the JS highlighter does with them is dependent upon that highlighter's feature set, so see their documentation. It also appears Highlight.js doesn't highlight the zig language, so there is that as well.