JavaScript Code Formatting Issue in Posts

  • Resolved tecmint

    (@tecmint)


    1 year, 5 months ago

    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.

    [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

    • This topic was modified 1 year, 5 months ago by tecmint.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Stef (a11n)

    (@erania-pinnera)

    Hi there, @tecmint,

    It looks like you’re still using the Classic Editor instead of the Block 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

    (@tecmint)

    @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)

    (@erania-pinnera)

    Hi there, @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, 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

    (@tecmint)

    Hi @erania-pinnera

    It still not working, see attached gif…

    https://gifyu.com/image/SQ7p6

    Thread Starter tecmint

    (@tecmint)

    @erania-pinnera

    Any update to fix this issue? or should i move to other plugin?

    Plugin Support Deric (a11n)

    (@dericleeyy)

    @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

    (@tecmint)

    @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 1 year, 4 months ago by tecmint.
    Plugin Support Deric (a11n)

    (@dericleeyy)

    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

    (@tecmint)

    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)

    (@erania-pinnera)

    Hey @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)

    (@erania-pinnera)

    Hello @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:

    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:

    <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 1 year, 4 months ago by Stef (a11n).
    • This reply was modified 1 year, 4 months ago by Stef (a11n).
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘JavaScript Code Formatting Issue in Posts’ is closed to new replies.