I'm back on the trail of my missing underscores, which I mentioned in an earlier post.

<COLOR color="#BF0000">Note: I'm using this post to test the issue…so you may ignore me!</COLOR>



If I post this:-
Const DB_NAME As String = "config.sqlite"
Const SETTINGS_PATH As String = ".config/leveller"

…using the 'code' display feature, it looks like this:-

…while using the "gb" button it looks like this:-


SETTINGS_PATH shows OK while writing this in the post editor, but not in my preview, when I simply see this:-
  SETTINGS PATH

On 3 different laptops, the underscore is missing when viewing the post.
It gets weirder.
…SOMETIMES, when viewing on my phone, the underscore is missing, sometimes its not.



.
OK…
<COLOR color="#004000">SOLVED: …by adding a space line I'm pretty sure that this is a display problem on Firefox (with my configs on Peppermint and Mint OS).
The white display area for the stuff between the tags gb & /gb is not high enough, so it sometimes clips out the underscores!</COLOR>

It could be a combination of Desktop Theme, font size, font type, or who knows what…

Fascinating. By clicking on screenshots of Chromium and Firefox, you can see that Firefox uses a larger font that then hides the underscore. See video.

cogier said

…Firefox uses a larger font that then hides the underscore.

Thanks Charlie.

Is the Gambas highlighter editable? I was wondering if a dummy blank line could be added to the entered text.

 I'll be honest, I have no idea. Jornmo sorted all this for the site, which is why I asked for his help. I have not heard from him in some time. The idea of putting up the site was simply to replace the 'GambasGuru' (If I remember its name correctly) site. If you feel that you could look at this, let me know, and I will give you access.

cogier said

I'll be honest, I have no idea. Jornmo sorted all this for the site…

Hey Charlie, don't worry about it…not worth losing sleep over. I have no idea how this feature works.

And I still think your site has been more successful than its predecessors .

gotta be some code on the server somewhere.

I'd agree the gb highlighting could do with spacing/margin,  and Charlie is always the first to point out if our gambas apps need spacing/margin   hehe


i now habitually make the first and last line of posted code have a single quote

eg..

gb
'
CodeHere()
'
/gb

i got lots of php experience Charlie if you want me to have a looksee and see if edits could be poss.
a quick look at page source tells me it's bbstyle(22) , wherever that is…

Charlie, so I started out thinking that we needed to modify the code to produce a blank line at the end of each code snippet.
But a much better idea is to simply add some padding to make it look like this:-

(Click to enlarge)

To do this, just modify the Theme.css file like this:-

(Click to enlarge)

Looking at this post, it may be an idea to also tweak the line spacing, because on my screen the underscores look a bit close to the next line. Anyway, something else to discuss.



BTW, you don't need admin access to view the code. Just use your web browser developer tools to make & test changes.
Obviously you do need admin access to make the changes global/permanent on the GambasOne website.

The Highlighter code is on Github: https://github.com/syntaxhighlighter/syntaxhighlighter

I hope this helps.

[Edit]

I thinks that's your end Charlie.

I had a study of the syntaxhighlighter script for this site, a lack of json experience and a lack of linefeeds in the code make it really hard to grasp.
It looks more like just a bunch of functions to interpret the relevant code style displayed in the box (that is formatted from a different phpBB page).

Like how gb.highlight has the highlight variables Comment, Symbol, Function,Text, etc that all the different highlighters set depending on the code then the TextEditor displays the colours.

In gambas terms Charlie sent me the sites gb.eval.highlight not the gb.form.editor

Steve's idea here sounds simple but on the page that loads highlighter the code not in the code so here's hoping you can find it Charlie

Happy Chrimbo everyone

Hi Steve, can you email me a modified copy of the file as I am having issues finding the correct text.

EDIT

Steve's idea here is simple but on the page that loads the code not in the code so here's hoping you can find it Charlie

Hi Bruce, and where do you think that will be?

cogier said

Hi Steve, can you email me a modified copy of the file as I am having issues finding the correct text.

EDIT

Steve's idea here is simple but on the page that loads the code not in the code so here's hoping you can find it Charlie

Hi Bruce, and where do you think that will be?

(Note, above post edited)

well i don't know, i'm good at path finding so i'd start with viewtopic.php then trace the code from there.
(i can't as php works server-side so the code i receive is not the original)

here's the output code for a gambas highlighted post i sent…

Looks like i should be able to find a "gambas" file of sorts for the highlight style but i can't find a gambas file of any sort in the code i have, it could all bee in the syntaxhighlighter.js file?

I wondering if Tobias Boege may be able to help us? looks like he co-wrote it and he is on the gambas M/L?

actually i think i found it

i was loading the files in my gambas made editor and it wasn't showing really long lines.
the theme.css looked blank to me untill i loaded it into pluma lol


try this Charlie…  overwrite the orig theme.css file with the one in this zip..

changes based on Steve's post

 it's a horrible css file.
it's one line
7457 chars long :-\

I also wonder if just changing the font may help?
when i look at an underscore in a highlighted post it seems very low in relation to the rest of the text.
another font may be different?

EDIT:

scrub that, i see you have already spoken of it and firefox does it's own font so shut me up lol

 Thanks, Bruce. I will upload when time allows, and we will see what happens. I'll let you know, but I am going to be busy for obvious reasons. Going to the pub now…

cogier said

…Going to the pub now…

What a fine idea.

I'm not sure what your problem is with the Theme.css file. Sounds like you cannot locate it, but there was a copy in the zip…maybe you can't find where to put it?

Maybe I need to write a better explanation of the problem...but we are just about to sit down to a splendid supper, so maybe not today...or tomorrow!

BruceSteers said

…try this Charlie…  overwrite the orig theme.css file with the one in this zip..

changes based on Steve's post

OK, I see your problem. This file has been minified.

I can give you a copy that is not minified, which makes it easy to read (like my earlier post) but you will presumably need to minify before overwriting the existing one.

…or, let me check if Bruce has the edit in the write place.

EDIT…..
…OK just tested Bruce's Theme.css and it looks like the edit is good!

Merry Christmas everyone…see you on the other side!!!

OK, I have a bit of time so I thought I'd just try to clarify the situation as I see it.

All we need to do is make a small change to the formatting to create space around the display of code, specifically the display of Gambas code which includes the colouring of keywords. There is no problem with the JavaScript code (syntaxhighlighter.js) which has already been modified by Jornmo to include all Gambas keywords, datatypes & so on.

The Cascading Style Sheets file (theme.css) supplements the web page HTML by providing information/instructions on how to display certain aspects of the page. For example; font size, control size, background colours & so on.

The json file is not relevant to any of this, as it just includes information about the JavaScript code, who owns the license, those involved in modifying it & so on.

Therefore, to create more space below the last line of any highlighted Gambas code, the easy way is by modifying the .css file to increase control "padding". In fact we could either increase the padding value (which increases the padding on all 4 sides) or just increase padding-bottom (which only increases the space below the last line).

My simple 3 line change to theme.css shown in post #7 works!
In a subsequent post I will describe how you can test this yourselves using your web browser's Developer Tools.

However, I don't know how your website handles changes. Do you simply replace existing files via FTP on your server, or do you have to use some kind of 'build tools' where you submit files which have to be compiled in some way?

As mentioned earlier, the original CSS & JavaScript code has been Minified for optimization. That is to say that although the layout of the original theme.css file would have looked similar to that shown in post #7, once minified, most of the spaces, line-feeds and all comments are removed making it almost unreadable. This is done so that web pages load faster and are more responsive. (I was able to capture a more readable copy of theme.css because the browser's Developer Tools can un-minify the code to some extent, e.g. its more readable, but any comments are lost).

As an analogy, minified Gambas code might look like this, on a single line:-

<COLOR color="#4000FF">PublicSubForm_Open()DimstrSearchTermsAsStringDimindexAsIntegerstrSearchFilePath=Application.Path&FILE_POP_SEARCHIfNotExist(strSearchFilePath)ThenExec["touch",strSearchFilePath]EndifIfExist(strSearchFilePath)ThenstrSearchTerms=File.Load(strSearchFilePath)</COLOR>

…and so on.

The fact that the theme.css and the syntaxhighlighter.js files have been minified, almost certainly indicates that you use some kind of tools to process your original web files, maybe as part of a "Publish" or "Optimise" operation. If so, I would have thought that you have a copy of the original files (un-minified) which you can modify prior to publishing updates. …Charlie, this is the first issue you need to address before you can move forward with this problem.

Does this make things any clearer?  If not, just ask for more.

I think it's ready Steve, we just need for Charlie to get a little time.

once i loaded the theme.css file into pluma i realised it had been scrunched up.

i found the correct place to insert the code as per your edits, and inserted the code.
pretty sure it is just a folder on the forum server that Charlie can just upload the new file.

cheers Steve,

i think we should up the padding on all the highlights just to make things clearer

Happy Chrimbo all

stevedee said

OK, I have a bit of time so I thought I'd just try to clarify the situation as I see it.

The json file is not relevant to any of this, as it just includes information about the JavaScript code, who owns the license, those involved in modifying it & so on.

yeah i could see that by looking at it. My problem was the theme.css file looked blank so i figured the style settings must have been elsewhere on the server.

stevedee said

My simple 3 line change to theme.css shown in post #7 works!
In a subsequent post I will describe how you can test this yourselves using your web browser's Developer Tools.

That could be useful.
I'm wondering if we applied the padding line to the previous syntaxhighlighter {} line or the next syntaxhighlighter container {} line instead would it aplly to all highlight modes?

stevedee said

As mentioned earlier, the original CSS & JavaScript code has been Minified for optimization.

Does this make things any clearer?  If not, just ask for more.

Thanks Steve, yes it's clear,  when i first loaded the files my first thought was less minified more mortified

i managed to find the correct place to insert your code still

Well done dude

stevedee said

…My simple 3 line change to theme.css shown in post #7 works!
In a subsequent post I will describe how you can test this yourselves using your web browser's Developer Tools…

Please see my blog post: Captain Bodgit: Firefox Developer Tools: a simple example

Clearly this will only get-you-started as there is a lot more to the browser's Developer Tools than this.

Have fun!

conclusion
The browser Developer Tools give the user the ability to tweak page elements to see how these changes affect the page display. These changes are not permanent, and can only be made so by the site administrator applying the same changes to the website files.

Therefore you don't have to worry that you might break something on someone else's website!

With the theme.css displayed as shown in the last illustration, it is also possible to highlight all the code in theme.css and save a copy.

Can you send me a copy of this file with the update and I will test it.

cogier said

conclusion
The browser Developer Tools give the user the ability to tweak page elements to see how these changes affect the page display. These changes are not permanent, and can only be made so by the site administrator applying the same changes to the website files.

Therefore you don't have to worry that you might break something on someone else's website!

With the theme.css displayed as shown in the last illustration, it is also possible to highlight all the code in theme.css and save a copy.

Can you send me a copy of this file with the update and I will test it.

Already have Charlie , a couple of posts back..
Gambas One - Gambas ONE

Already have Charlie, a couple of posts back..

Opps! Sorry Bruce

OK I have uploaded the file. Let me know what you think.

cogier said

Already have Charlie, a couple of posts back..

Opps! Sorry Bruce

OK I have uploaded the file. Let me know what you think.

I don't think it's right.

Is it my imagination or has the left margin increased?
it's possible the 2 figures for the padding: 5px 0 statement are X & Y figures.
so maybe we need to switch them over as i don't think extra left margin was needed?

Or it could be my imagination and there's no change.

Steve knows more about this i suspect than me.

There is this line in the css file…

margin, looks like a candidate to me.

I'll look into Steve's post about testing the theme (not got any time now)