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

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

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)

I'm in for the job! 

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:

[Select]

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

[Select]

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

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.

[publicdomain]

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.

-OptimalDesigns (September 01, 2023, 05:36 PM)

Thanks for the clarification.

A) If the "window" is in-page, you can use a floating div.

B) If the "window" is separate from the page, you can use a popup on click.

Please specify your requirement! (A or B) I can provide the HTML for either (or both) 

[publicdomain]

Is this your requirement? 

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

If so, just add the max-height style to the current code tag in your HTML page:

[Select]

<pre><code style="max-height:40em;">

[OptimalDesigns]

A) If the "window" is in-page, you can use a floating div.

-publicdomain (September 01, 2023, 05:45 PM)

Vic, option 'A' should do it.  Phil

[publicdomain]

A) If the "window" is in-page, you can use a floating div.

-publicdomain (September 01, 2023, 05:45 PM)

Vic, option 'A' should do it.  Phil

-OptimalDesigns (September 01, 2023, 06:31 PM)

Super! Just posted right above about the "max-height" style

https://www.donationcoder.com/forum/index.php?topic=53683.msg452507#msg452507

(Exact edit to your HTML attached )

[publicdomain]

Hello again Phil! I got your last requirement covered:

Nice to let user drag height to what is best for them.

-OptimalDesigns (August 31, 2023, 03:03 PM)

You will need to add the resize: vertical; style to the code tag, like this:

[Select]

<pre><code style="max-height:40em; resize: vertical;">

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

Anything else, just say it
Vic

[OptimalDesigns]

Looks great!  Will be testing it next week, thanks for the help 

[publicdomain]

Looks great!  Will be testing it next week, thanks for the help 

-OptimalDesigns (September 02, 2023, 02:35 AM)

Glad you find it useful! Remember you can also add it to your style sheet if you want it to be applied to every "code" block in the page, in case you get to feature more than one

[Select]

<style>
code {
    max-height: 40em;
    resize: vertical;
}
</style>

Cheers!

[OptimalDesigns]

code {max-height: 40em; resize: vertical; }

Some code blocks need to be just a line or two.  Any way to  do this too?

[publicdomain]

Some code blocks need to be just a line or two.  Any way to  do this too?

-OptimalDesigns (September 02, 2023, 10:54 AM)

Yes. Please try with:

[Select]

<pre><code style="height: auto;">

Cheers!

[OptimalDesigns]

<style>
code {
    max-height: 40em;
    resize: vertical;
}
</style>

Not opening a 'msg. window' on a webpage for each code command.  It just grays the code, kind of highlighting it.

[publicdomain]

It just grays the code

-OptimalDesigns (September 04, 2023, 08:28 AM)

Perhaps it's interfering with the highlighter... Better to use the style on each as you've been doing, like:

[Select]

<pre><code style="height: auto; resize: vertical;">

(If you really need to use bulk code highlighting we can create different classes, change highlighter, etc  )

[OptimalDesigns]

[Select]

<pre><code style="height: auto; resize: vertical;">

Did that, nogo.  When I enter a 'code' line here on donationCoder, it gives my the 'msg. window' I'm trying for just like here on this reply.

[publicdomain]

When I enter a 'code' line here on donationCoder, it gives my the 'msg. window' I'm trying for just like here on this reply.

-OptimalDesigns (September 06, 2023, 09:47 AM)

Hello again dear Phil!  DonationCoder uses GeShi for the code tag functionality:

https://github.com/GeSHi/geshi-1.0

Is your requirement is to have the exact software powering the DonationCoder code tag on your website?  If so, then PHP is needed.

Do you have PHP on your server?

(BTW I can also make you a highlighting file for your language if you provide all the keywords)


...I'm willing to keep working on this until you are totally happy/satisfied with the implementation/results --that is, it is just as you require!

Cheers! 

[OptimalDesigns]

Is your requirement is to have the exact software powering the DonationCoder code tag on your website?  If so, then PHP is needed.

Do you have PHP on your server?

-publicdomain (September 06, 2023, 12:58 PM)

Yes.  Downloaded geshi.tar.gz now what?  Yes, PHP is on my server.

[publicdomain]

Yes.  Downloaded geshi.tar.gz now what?  Yes, PHP is on my server.

-OptimalDesigns (September 06, 2023, 05:34 PM)

That's great to hear Phil!

Let's first do the proper container ("msg window"); once you approve it as suitable, we can focus on completing the highlighting .


Okay, the DonationCoder page uses a <div> instead of a <code> tag, so in order to match it, as you require, you must add this style to the <head>:

[Select]

<style>
div
{
    display: block;
}

.code
{
    padding: 10px;
    background: #eeeeef;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    color: #000000;
    font-family: monospace;
    font-size: 13px;
    line-height: 18px;
    border: 1px solid #aaaaaa;
    margin: 1px auto 1px auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: 40em;
}
</style>

And then when you want to insert some code, you can use:

[Select]

<div class="code">
...Insert here...
</div>

I took the liberty to attach a modified "example_code.txt" file with highlighter tags removed, as well as <pre><code> replaced with the new <div> (see attached)

[OptimalDesigns]

Yes.  Downloaded geshi.tar.gz now what?

-OptimalDesigns (September 06, 2023, 05:34 PM)

*.gz file ... assume that's some type of compressed file.  How does one un-compress it in Windows OS?

Updated example-code.txt file and attached it.  There are several <DIV> stmt.s now.  They look okay?  Now need to get GESHI PHP uploaded to my website.

[publicdomain]

*.gz file ... assume that's some type of compressed file.  How does one un-compress it in Windows OS?

Updated example-code.txt file and attached it.  There are several <DIV> stmt.s now.  They look okay?  Now need to get GESHI PHP uploaded to my website.

-OptimalDesigns (September 07, 2023, 04:57 AM)

Hi Phil, just edited the style a bit to:

[Select]

<style>
.code
{
    display: block;
    padding: 10px;
    background: #eeeeef;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    color: #000000;
    font-family: monospace;
    font-size: 13px;
    line-height: 18px;
    border: 1px solid #aaaaaa;
    margin: 1px auto 1px auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: 40em;
}
</style>

A windows-friendly .zip file is available:

https://github.com/GeSHi/geshi-1.0/releases/download/v1.0.9.1/GeSHi-1.0.9.1.zip

Instructions for unzipping & installing GeShi are on the official site:

http://qbnz.com/highlighter/geshi-doc.html#extracting-geshi


There is a discrepancy though since DonationCoder.com is powered by Linux and PHP, while you are on Windows and using Server side includes... At this point I don't know if you already have a way to invoke PHP from your current server pages.

Now, if it proves too convoluted to match (Linux/PHP vs Windows/SSI) please allow me to work a client-side/browser-only solution. It can be done within the week..


Finally, please provide all the keywords to highlight, for me to create a custom highlighter suitable to your use case

Cheers & many thanks! 

[OptimalDesigns]

Finally, please provide all the keywords to highlight, for me to create a custom highlighter suitable to your use case

-publicdomain (September 07, 2023, 07:28 AM)

Not sure what you mean.  Keywords?  Highlight?

[publicdomain]

Not sure what you mean.  Keywords?  Highlight?

-OptimalDesigns (September 07, 2023, 10:22 AM)

The keywords you feed to the parser/lexer to generate grammars to highlight.

If you don't have them, please don't worry about the keywords; kindly tell me the name of the language


What's the name of the programming language you are trying to get into the "msg window"?

(Fortan? I see you mention some languages on your page: https://goal-driven....lus-programming.html)


P.S: just sent you a PM regarding "creative freedom"

[OptimalDesigns]

FortranCalculus.