Highligh Javascript code inside HTML

Hello,

Here are instructions for implementing line highlight with Prism.js:

https://prismjs.com/plugins/line-highlight/

“Second question: how can you change the language of a code block?”

It depends, how are you adding the code blocks to begin with?

1. Misunderstanding.

I only need to syntax highlight Javascript code (inside HTML) as Javascript – now it is shown with default language-markup color.

2. I’m using the classic editor and I click on the <> button to add Prism.js code. I’m asked for the language but when the code is there I don’t know how to change it (except by editing source code).

3. I fixed punctuations in atribute values with CSS rules.

1) Can you provide steps or something, having a hard time trying to understand how to help here.

2) Yeah you need to edit the source code. Check out the detailed instructions here:

https://www.ads-software.com/plugins/prismatic/#installation

Basically just change language-php to language-whatever and save changes. Lots of details in the above linked docs, recommended.

3) Okay.

This is part of HTML code:

<div class="ai-form warning-enabled rounded">
  <div style="clear: both;"></div>
</div>
<script type="text/javascript">
  amzn_assoc_placement = "adunit0";
  amzn_assoc_search_bar = "true";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

I select HTML as the language and it works fine for HTML. However, Javascript code inside <script> tags is shown with the default language-markup color.

I would like to use colors for Javascript language there.

Yeah that happens when multiple languages are included in the same code block. It’s an issue that needs to be dealt with by the providers of the syntax-highlight scripts (i.e., Prism.js and Highlight.js). For example, I often share code that contains both HTML and PHP at my code snippets site WP-Mix. And the result most of the time is that the syntax-highlighting breaks at some point in the code block. Not sure if there is anything that can be done other than report to Prism.js devs.

• This reply was modified 4 years, 6 months ago by Jeff Starr. Reason: Adds infos

I fixed the issue with additional code tags with javascript class.

Thansk for the answers.

You’re wlecome. Glad you got it sorted.