Text alignment issue

[sukhwinderkaur1389]

Hi, While integrate this to the website its not working as expected.

I have attached the screenshot as text is not getting selected while doing press ctrl+A

also can we use JSON?

can we beautify json?

[sukhwinderkaur1389]

Can we apply beautify feature as well?

[adriancs2]

Hi, there,

text is not getting selected while doing press ctrl+A

reason: you did not apply the same monospace font for both container,

1st >> textarea 2nd > #preCode code

"beautify", I assume you are referring to: https://codebeautify.org/ I haven't studied "beautify" yet, not sure how to use it at the moment.

can we beautify json?

Yes, in your code wrapper:

<pre id="preCode"><code id="codeBlock" class="language-html"></code></pre>

change it to:

<pre id="preCode"><code id="codeBlock" class="language-json"></code></pre>

[sukhwinderkaur1389]

Hi, While integrate this to the website its not working as expected.

I have attached the screenshot as text is not getting selected while doing press ctrl+A

also can we use JSON?

can we beautify json?

Hi, there,

text is not getting selected while doing press ctrl+A

reason: you did not apply the same monospace font for both container,

1st >> textarea 2nd > #preCode code

"beautify", I assume you are referring to: https://codebeautify.org/ I haven't studied "beautify" yet, not sure how to use it at the moment.

can we beautify json?

Yes, in your code wrapper:

<pre id="preCode"><code id="codeBlock" class="language-html"></code></pre>

change it to:

<pre id="preCode"><code id="codeBlock" class="language-json"></code></pre>

Thanks for the quick reply

[sukhwinderkaur1389]

Getting following in console Is missing anything??

[adriancs2]

why did you use the "language-undefined", since you're interested in "JSON", it should be "language-json".

[adriancs2]

maybe there are other block which coincidentally also <pre><code></code></pre> but they are actually not intended to be rendered by Highlight.js.

you can tell Highlight.js to only render specific block only.

So in stead of doing this:

function highlightJS() {
    document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
    });
}

you can do this:

function highlightJS(elementID) {
    let el = document.getElementById(elementID);
    if(el) {
        hljs.highlightElement(el);
    } else {
        console.log(`Element with ID '${elementID}' not found.`);
    }
}

or this:

function highlightJS() {
    let el = document.getElementById("my-text-editor");
    if(el) {
        hljs.highlightElement(el);
    } else {
        console.log(`Element with ID '${elementID}' not found.`);
    }
}

[sukhwinderkaur1389]

maybe there are other block which coincidentally also \<pre\><code></code>\</pre\> but they are actually not intended to be rendered by Highlight.js.

you can tell Highlight.js to only render specific block only.

So in stead of doing this:

function highlightJS() {
    document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
    });
}

you can do this:

function highlightJS(elementID) {
    let el = document.getElementById(elementID);
    if(el) {
        hljs.highlightElement(el);
    } else {
        console.log(`Element with ID '${elementID}' not found.`);
    }
}

or this:

function highlightJS() {
    let el = document.getElementById("my-text-editor");
    if(el) {
        hljs.highlightElement(el);
    } else {
        console.log(`Element with ID '${elementID}' not found.`);
    }
}

[sukhwinderkaur1389]

I am using following , we need to loop through all following pre tags?

[sukhwinderkaur1389]

Can you please help for this?

[sukhwinderkaur1389]

[sukhwinderkaur1389]

Is there any way to connect with you? Like on google meet or zoom?

[sukhwinderkaur1389]

Is there any way to connect with you? Like on google meet or zoom?

Can you please replay for following?

[lucas-mch]

@sukhwinderkaur1389 You still having problems? Can you share the code in a repository?