looking for a css - html knowledgeable person (SOLVED)

Post

Posted
Rating:
#1 (In Topic #1503)
gbWilly
Avatar
Administrator
gbWilly is in the usergroup ‘unknown’
Gambas guides are html based. I have created a predefined css based style for the guide title page, guide license page and guide content pages. I use internal css, meaning the css is defined in between <head> and </head> of each file. So no css template is used in form of a separate  css file

I have adapted my private editor to create these template pages and added a toolbar providing the different headings and paragraphs, several boxes, image insertion into a pre defined setting etc.

All is to my liking except for the Gambas code boxes. Below some images on what I do now:
Internal css
Image

result in webview

result in webview

(Click to enlarge)

Inserted code box in the body
Image

the inserted code box

the inserted code box

(Click to enlarge)

Result in webview
Image

internal css

internal css

(Click to enlarge)


Would it be possible to create some sort of minimalist Gambas code highlight using css mechanisms that I am not knowledgeable about or does it require more, like some fancy insertion into the html using gambas mechanisms?

Above is more a 'would like it different, but it's okay for now' kind of issue, as I a have a lot more on my plate atm that is of higher priority. But, if someone can come up with a doable shortcut to above desire, so to speak. Let me know below…or send a DM…
gbWilly
- Gambas Dutch translator
- Gambas wiki content contributor
- Gambas debian/ubuntu package recipe contributor
- GambOS, a distro for learning Gambas and more…
- Gambas3 Debian/Ubuntu repositories

… there is always a Catch if things go wrong!
Online now: No Back to the top

Post

Posted
Rating:
#2
gbWilly
Avatar
Administrator
gbWilly is in the usergroup ‘unknown’
Funny, just saw a bug in the template produced for code box insertion..  :lol:
Already fixed it  8-)
gbWilly
- Gambas Dutch translator
- Gambas wiki content contributor
- Gambas debian/ubuntu package recipe contributor
- GambOS, a distro for learning Gambas and more…
- Gambas3 Debian/Ubuntu repositories

… there is always a Catch if things go wrong!
Online now: No Back to the top

Post

Posted
Rating:
#3
BruceSteers
Guru
BruceSteers is in the usergroup ‘Guru’
Sorry i know nothing about css ,, but…
did you know gb.highlight and TextHighlighter.class can very quickly convert gambas code (and any other highlight supported mode) into html code?

Like this…

Code (gambas)

  1.  
  2. Dim sHtml As String
  3. Dim sGambasCode As String = "For c As Integer = 0 to 10\n  Print c\nNext"
  4.  
  5. ' Note: change "gambas" below to use other highlight modes (like "sh" for shell)
  6.  
  7. sHtml = TextHighlighter["gambas"].ToHTML(sGambasCode)
  8.  
  9. Print sHtml
  10.  
  11.  

gives all this code…

Code

span style="color:#000000;font-family:monospace;"><span style="color:#3398C3;"><b>For</b></span>&nbsp;c&nbsp;<span style="color:#3398C3;"><b>As</b></span>&nbsp;<span style="color:#E67E22;"><b>Integer</b></span>&nbsp;<b>=</b>&nbsp;<span style="color:#E62222;">0</span>&nbsp;<span style="color:#3398C3;"><b>to</b></span>&nbsp;<span style="color:#E62222;">10</span><br>
&nbsp;&nbsp;<span style="color:#3398C3;"><b>Print</b></span>&nbsp;c<br>
<span style="color:#3398C3;"><b>Next</b></span></span>

looks like this…
Image

(Click to enlarge)


The advantage of using gb.highlight is the code will look exactly the same as it looks in the IDE TextEditor.

here as a function that can do other mode types too :)

Code (gambas)

  1.  
  2. '' Return html code that looks like gb.highlight highlighted text. supports all highlight modes (default is gambas)
  3. Public Sub CodeToHTML(Code As String, Optional Mode As String = "gambas") As String
  4.  
  5.   Return TextHighlighter[Mode].ToHTML(Code)
  6.  
  8.  
Online now: No Back to the top

Post

Posted
Rating:
#4
BruceSteers
Guru
BruceSteers is in the usergroup ‘Guru’
I tweaked that function a bit to box the code and show the mode (using <table>)…

Code (gambas)

  1.  
  2. Public Sub Form_Open()
  3.  
  4.   Dim sHtml As String
  5.   Dim sGambasCode As String = File.Load("./.src/Application.class")
  6.   Dim sShellCode As String = "echo 'hello'\nls " & Shell(User.Home)
  7.  
  8.   sHtml = CodeToHTML(sGambasCode)
  9.   sHtml &="<br>"
  10.   sHtml &= CodeToHTML(sShellCode, "sh")
  11.  
  12.   WebView1.SetHtml(sHtml)
  13.  
  15.  
  16.  
  17. '' Return html code in a box that looks like gb.highlight highlighted text. supports all highlight modes (default is gambas)
  18. Public Sub CodeToHTML(Code As String, Optional Mode As String = "gambas") As String
  19.  
  20.   Return "<table border=1 width=100% cellpadding=5><tr><td align=left><font size=-1>" & Mode & " code...</font></td></tr><tr><td>" & TextHighlighter[Mode].ToHTML(Code) & "</td></tr></table>"
  21.  
  23.  
  24.  

Image

(Click to enlarge)

Online now: No Back to the top

Post

Posted
Rating:
#5
gbWilly
Avatar
Administrator
gbWilly is in the usergroup ‘unknown’
I was kind of expecting highlight being involved, just didn't realise it could be converted to html that easy, altough I could have suspected something down the lines. ;)
I can work with this. I guess I'll recode my toolbar button for code insertion to opening a form with an editor for typimg the example code. Next have the 'to html' converted code inserted at the proper place. I like it already… :D
gbWilly
- Gambas Dutch translator
- Gambas wiki content contributor
- Gambas debian/ubuntu package recipe contributor
- GambOS, a distro for learning Gambas and more…
- Gambas3 Debian/Ubuntu repositories

… there is always a Catch if things go wrong!
Online now: No Back to the top

Post

Posted
Rating:
#6
BruceSteers
Guru
BruceSteers is in the usergroup ‘Guru’
Check out this commit…
Add "Copy highlights" to editor menu (70d50b3b) · Commits · Bruce Steers / gambas · GitLab

I just made it so i have "Copy highlights (as HTML)" in the Edit menu of my IDE.
So now I can select any text in the IDE editor and copy it as it looks in html form. :D

How to D.I.Y…
From the source code load /app/src/gambas3 into the IDE
Edit FEditor.class/form for gambas files and FTextEditor.class/form for non gambas files
In the forms add the "Copy html" menu using the editor and give it the Action .copyhtml

In the class find the Action_Activate() function.
insert the following code into the Select conditions…

Code (gambas)

  1.     Case ".copyhtml"
  2.       If Not $hEditor.Selected Then Return
  3.       Clipboard.Copy(TextHighlighter[$hEditor.Highlight].ToHTML($hEditor.SelectedText), "text/html")
  4.  
Online now: No Back to the top

Post

Posted
Rating:
#7
gbWilly
Avatar
Administrator
gbWilly is in the usergroup ‘unknown’
The new code boxes in the guide look great.
Image

(Click to enlarge)

I adapted my editor to give me an extra tab with an editor control, where I write the example code (or copy/paste).
Image

Step 2

Step 2

(Click to enlarge)

Next on my html guide page tab, I select the position where to insert the code box, click on toolbutton for image insertion, 'et voila' as the French say. The code behind the image insertion simply converts the code on the code tab to html and inserts it (along with some stuff to put it in a fancy aliceblue box)  :lol:
Image

Step 1

Step 1

(Click to enlarge)

I selected the inserted html code below, to make clear what is inserted.
Image

(Click to enlarge)

The highlighted code is placed in an aliceblue box  ;)

I love this solution, thanks Bruce for setting me on the right track, so easy and yet such a great result.
gbWilly
- Gambas Dutch translator
- Gambas wiki content contributor
- Gambas debian/ubuntu package recipe contributor
- GambOS, a distro for learning Gambas and more…
- Gambas3 Debian/Ubuntu repositories

… there is always a Catch if things go wrong!
Online now: No Back to the top

Post

Posted
Rating:
#8
gbWilly
Avatar
Administrator
gbWilly is in the usergroup ‘unknown’
I noticed that themes are an optional argument  :D
And I like dark themes, so now the code is back in a black box and code highlighting is exactly as in the code window (gambas with obsidian theme).
Image

preview tab

preview tab

(Click to enlarge)

So, code is back in black… ;)
Image

Code tab

Code tab

(Click to enlarge)

A perfect match and exactly like gbuser will see code when opening Gambas3 IDE (if all pre configuration went well)
gbWilly
- Gambas Dutch translator
- Gambas wiki content contributor
- Gambas debian/ubuntu package recipe contributor
- GambOS, a distro for learning Gambas and more…
- Gambas3 Debian/Ubuntu repositories

… there is always a Catch if things go wrong!
Online now: No Back to the top

Post

Posted
Rating:
#9
BruceSteers
Guru
BruceSteers is in the usergroup ‘Guru’
Cool :)  indeed the ToHTML method is a nice simple solution :)

You could auto-detect dark theme. (Most things should adapt automatically)

Dim sTheme as String = if(Application.Darktheme, "obsidian", "") ' set obsidian if dark or use default.

Because i personally don't like dark themes and would be likely to change the system theme.

PS. Application.Darktheme is writable. if you manually set it it should stop any auto-adapting and retain the colors you have set.
Ie. If set True it forces the program to be Darktheme even if the desktop is not.

Looks good though, nice work :)
Online now: No Back to the top
1 guest and 0 members have just viewed this.