Title: JavaScript Code Formatting Issue in Posts
Last modified: June 6, 2023

---

# JavaScript Code Formatting Issue in Posts

 *  Resolved [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 12 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/)
 * Hi Support,
 * I want to display a javascript code block in the post, but when I added the following
   js code to the post it not displaying properly.
 *     ```wp-block-code
       [javascript]
       <script>
           const btn = document.getElementById('btn');
           const textInput = document.getElementById('text');
   
           btn.addEventListener('click', () => {
             const text = textInput.value.trim();
       </script>
       [/javascript]
       ```
   
 * See the attached gif for more clarity – [https://gifyu.com/image/SuRLh](https://gifyu.com/image/SuRLh)
    -  This topic was modified 2 years, 12 months ago by [tecmint](https://wordpress.org/support/users/tecmint/).

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Support [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/)
 * (@erania-pinnera)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16814015)
 * Hi there, [@tecmint](https://wordpress.org/support/users/tecmint/),
 * It looks like you’re still using the [Classic Editor](https://wordpress.com/support/classic-editor-guide/)
   instead of the [Block editor](https://wordpress.org/support/article/wordpress-editor/),
   which is the editor we officially support.
 * I also tested your code, and on the Block Editor, I was able to make it work 
   by using the HTML block and getting rid of the `[javascript] [/javascript]` shortcode
   tag.
 * Can you try using the HTML code only and let me know if that works? Thanks!
 *  Thread Starter [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16823412)
 * [@erania-pinnera](https://wordpress.org/support/users/erania-pinnera/)
 * It is still not working with HTML block on Block editor as well, and I can’t 
   use Block editor.. any solution to fix this?
 *  Plugin Support [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/)
 * (@erania-pinnera)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16835646)
 * Hi there, [@tecmint](https://wordpress.org/support/users/tecmint/),
 * Apologies for the delay in getting back at you — since my suggestion didn’t work
   I asked our developers to help me out.
 * First off, I’d like to point out to just use the Text tab in the classic editor
   to use the shortcodes, and not change the code anymore via the Visual tab — this
   is because the Visual editor escapes the HTML by default, and can cause the sort
   of issues that you showed on the GIF.
 * With that said, twe have two suggestions:
    1. Add the `htmlscript` parameter to the shortcode, so `[javascript]` becomes `[
       javascript htmlscript=1]`
 * This will allow the HTML colour to be applied to the <script> tag while still
   retaining the JS syntax colour
 * 2. This is going to fix the problem but please note that the plugin will not 
   colourize modern JS syntax. In light of that:
    - `const` isn’t going to be colorized, but `var` is
    - `() => { ... }` isn’t colorized, but `function() { ... } `  is
    - And so on
    - The brush with the JS syntax (responsible for colouring the JS syntax) [is here](https://github.com/Automattic/syntaxhighlighter/blob/15a0fcb2c0d0fc8ace2adde9abc9dd579c9738af/syntaxhighlighter3/scripts/shBrushJScript.js),
      by the way. (useful to let the user know about what keywords are going to 
      be highlighted)
 * Hopefully this helps, and answers your question.
 *  Thread Starter [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16835864)
 * Hi [@erania-pinnera](https://wordpress.org/support/users/erania-pinnera/)
 * It still not working, see attached gif…
 * [https://gifyu.com/image/SQ7p6](https://gifyu.com/image/SQ7p6)
 *  Thread Starter [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16850443)
 * [@erania-pinnera](https://wordpress.org/support/users/erania-pinnera/)
 * Any update to fix this issue? or should i move to other plugin?
 *  Plugin Support [Deric (a11n)](https://wordpress.org/support/users/dericleeyy/)
 * (@dericleeyy)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16867567)
 * [@tecmint](https://wordpress.org/support/users/tecmint/)
 * The visual preview in the classic editor will not work correctly, as it will 
   try to process the script. I would suggest publishing it as a draft and previewing
   it on the front end directly. Please don’t go into the visual tab using the classic
   editor.
 *  Thread Starter [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16867774)
 * [@dericleeyy](https://wordpress.org/support/users/dericleeyy/)
 * Thanks, but that’s not possible, how come I edit the html content of a post or
   page without going to the classic editor? switching to another plugin..
   Now I
   have to open each post and do changes as per the new plugin… Also, the support
   of your plugin is very slow, you guys took a month to reply…Thanks…
    -  This reply was modified 2 years, 11 months ago by [tecmint](https://wordpress.org/support/users/tecmint/).
 *  Plugin Support [Deric (a11n)](https://wordpress.org/support/users/dericleeyy/)
 * (@dericleeyy)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16868105)
 * > how come I edit the html content of a post or page without going to the classic
   > editor?
 * You can still use the classic editor. Just that the preview tab will not work
   correctly.
 * We would recommend using the SyntaxHighlighter Code block when using the block
   editor.
 *  Thread Starter [tecmint](https://wordpress.org/support/users/tecmint/)
 * (@tecmint)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16868553)
 * I have tried all the possible things, like block editor with syntax highlighting
   block, etc but it is not working..
 * Any solution? Or should I move to other plugin?
 *  Plugin Support [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/)
 * (@erania-pinnera)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16885483)
 * Hey [@tecmint](https://wordpress.org/support/users/tecmint/),
 * I’ve asked our developers to take a look at it — we’ll circle back once we hear
   from them.
 *  Plugin Support [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/)
 * (@erania-pinnera)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16903955)
 * Hello [@tecmint](https://wordpress.org/support/users/tecmint/),
 * We spoke with our tech team, and apparently you should only rely on Text mode
   while using the SyntaxHighlighter Enhanced plugin. 
   There isn’t an easy way to
   handle this properly I’m afraid, using only our own plugin or additional plugins
   to implement this (our developers even tested using the Raw HTML plugin and even
   then they recommend just relying on the Text tab to avoid escaping issues). It
   looks more like a TinyMCE problem, and there’s no good way around that.
 * One thing that’s been suggested, but is not optimal, is to escape the `<script`
   tag as `&lt;script` and `</script>`  as `&lt;/script>`, and use a snippet to 
   replace it for the final user.  The snippet would look like that:
 *     ```wp-block-code
       add_filter( 'do_shortcode_tag', function( $output, $tag, $attr, $m  ) {
       	if ( in_array($tag, ["code", "html", "javascript"], true) ) {
       		$output = str_replace("&amp;lt;", "&lt;", $output);
       	}
           return $output;
       }, 10, 4 );
       ```
   
 * Keep in mind that the second line defines for what shortcodes this filter will
   run.
 * For instance, the code that you initially sent would look like this with this
   escaping:
 *     ```wp-block-code
       <html>
         <head>
           <title>GeeksVeda</title>
           &lt;script type="module" src="main.js">&lt;/script>>
         </head>
         <body>
           <h2>Including one file into another JS file</h2>
         </body>
       </html>
       ```
   
 * Note that, only two `<` need to be replaced, and only for the `<script>` tag (
   and its closing tag). That’s enough for blocking the TinyMCE  from messing with
   the content.
 * Hopefully this fixes the issue!
    -  This reply was modified 2 years, 10 months ago by [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/).
    -  This reply was modified 2 years, 10 months ago by [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/).

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘JavaScript Code Formatting Issue in Posts’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/syntaxhighlighter_ffffff.svg)
 * [SyntaxHighlighter Evolved](https://wordpress.org/plugins/syntaxhighlighter/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/syntaxhighlighter/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/syntaxhighlighter/)
 * [Active Topics](https://wordpress.org/support/plugin/syntaxhighlighter/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/syntaxhighlighter/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/syntaxhighlighter/reviews/)

 * 11 replies
 * 3 participants
 * Last reply from: [Stef (a11n)](https://wordpress.org/support/users/erania-pinnera/)
 * Last activity: [2 years, 10 months ago](https://wordpress.org/support/topic/javascript-code-formatting-issue-in-posts/#post-16903955)
 * Status: resolved