topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Wednesday July 24, 2024, 5:38 pm
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Last post Author Topic: Need code inserted into window with scrollbars; fixed percent width and height?  (Read 17205 times)

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
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

  • Charter Member
  • Joined in 2006
  • ***
  • Points: 1
  • Posts: 9,756
    • View Profile
    • Read more about this member.
    • Donate to Member
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

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
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.

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

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
I'm talking about a blank webpage ... need html code for the job.

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:

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

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.
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 01, 2023, 02:45 PM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
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

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
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.

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)  :Thmbsup:
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
Is this your requirement?  :)

Screenshot from 2023-09-01 19-30-49_example-code.pngNeed 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:

<pre><code style="max-height:40em;">
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 01, 2023, 06:32 PM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
A) If the "window" is in-page, you can use a floating div.

Vic, option 'A' should do it.  Phil

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
A) If the "window" is in-page, you can use a floating div.

Vic, option 'A' should do it.  Phil

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

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

(Exact edit to your HTML attached )
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
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:

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

Screenshot from 2023-09-01 23-16-47_vertical-scroll.pngNeed code inserted into window with scrollbars; fixed percent width and height?

Anything else, just say it :Thmbsup:
Vic
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 01, 2023, 10:28 PM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
Looks great!  Will be testing it next week, thanks for the help  :)

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
Looks great!  Will be testing it next week, thanks for the help  :)

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

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

Cheers!
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
code {max-height: 40em; resize: vertical; }

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

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
Some code blocks need to be just a line or two.  Any way to  do this too?

Yes. Please try with:

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

Cheers! :Thmbsup:
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
<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.
« Last Edit: September 05, 2023, 12:55 PM by OptimalDesigns »

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
It just grays the code

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

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

(If you really need to use bulk code highlighting we can create different classes, change highlighter, etc  :))
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
<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

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
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.

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!  :Thmbsup:
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
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?
Yes.  Downloaded geshi.tar.gz now what?  Yes, PHP is on my server.

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
Yes.  Downloaded geshi.tar.gz now what?  Yes, PHP is on my server.

That's great to hear Phil! :up:

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

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

<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)
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 07, 2023, 06:15 AM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
Yes.  Downloaded geshi.tar.gz now what?
*.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

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
*.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.

Hi Phil, just edited the style a bit to:

<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!  :Thmbsup:
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 07, 2023, 08:33 AM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
Finally, please provide all the keywords to highlight, for me to create a custom highlighter suitable to your use case
Not sure what you mean.  Keywords?  Highlight?

publicdomain

  • Honorary Member
  • Joined in 2019
  • **
  • Posts: 736
  • Call me Vic!
    • View Profile
    • Donate to Member
Not sure what you mean.  Keywords?  Highlight?

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"
My name's Victor but do feel free to call me Vic! (now known as "paradisusvic")

❤️ Support on Patreon @ www.patreon.com/paradisusis
New Email/Paypal: paradisusvicgmail.com
« Last Edit: September 07, 2023, 11:04 AM by publicdomain »

OptimalDesigns

  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
FortranCalculus.