ATTENTION: You are viewing a page formatted for mobile devices; to view the full web page, click HERE.

Other Software > Developer's Corner

Need code inserted into window with scrollbars; fixed percent width and height?

(1/6) > >>

OptimalDesigns:
I have a large listing of code that needs to be put into a window, as done here automatically.  Nice to let user drag height to what is best for them.  Presently, code is just following:

<pre><code>
ooo
</code></pre>

How to put this in a window with scrollbars on a webpage?

Deozaan:
Can't the regular TextArea handle that? Then the user can drag the corner to any size they want. And it will automatically handle the scrollbar.

OptimalDesigns:
Can't the regular TextArea handle that? Then the user can drag the corner to any size they want. And it will automatically handle the scrollbar.
-Deozaan (August 31, 2023, 04:02 PM)
--- End quote ---

I'm talking about a blank webpage ... need html code for the job.

publicdomain:
I'm talking about a blank webpage ... need html code for the job.
-OptimalDesigns (September 01, 2023, 03:40 AM)
--- End quote ---

I'm in for the job!  :Thmbsup:

So, if I understand you correctly, you're talking about a Syntax Highlighter, such as:

https://highlightjs.org


An easy setup is this:

1) First, you need to load the highlighter from CDN:


--- ---<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>
2) Insert the code in the tags for automatic loading:

This will find and highlight code inside <pre><code> tags; it tries to detect the language automatically. If automatic detection does not work for you, you can specify the language in the class attribute:
--- End quote ---


--- ---<pre><code class="language-html">...</code></pre>

You can find a list of available programming languages to highlight here:

https://highlightjs.org/download


Nice to let user drag height to what is best for them.-OptimalDesigns (September 01, 2023, 03:40 AM)
--- End quote ---

So, you are able to insert the code (and language) on the page and only need the user to control the height of the highlighted code window?

(It is doable! Even if another highlighter may be suitable. 'Where there is a will there's a way' :))

Thanks.

OptimalDesigns:
I'm trying to create a 'window' like we use to send msg.s from, but with my <pre><code> ... </code in it.  No, not highlighting it.  Here is a link that will show you what your highlighting did.  The article html code is attached.

Navigation

[0] Message Index

[#] Next page

Go to full version