hubFS: THE place for F#

. . . are you on The Hub?
Welcome to hubFS: THE place for F# Sign in | Join | Help
in Search

Coloring Your Code on The Hub

Last post 06-02-2006, 10:29 by sisaacs. 14 replies.
Sort Posts: Previous Next
  •  02-25-2006, 20:32 71

    Coloring Your Code on The Hub

    You can now add syntax highlighting to your code snippets on The Hub.  It's pretty simple to get setup for this.  Here are the steps:

    1. Click on your name at the top of this page.  (You must be logged in.)
    2. Select Site Options
    3. For Content Editor, choose "HTML Rich Editor (for Developers)".
    4. Save your profile.

    The next time you go to post something (in your blog or a forum), you will see new buttons on your toolbar.  Enter some code, select the text, and click the button for the language of your choice.  There is an icon on the end of the toolbar for F# (* an unofficial icon that I made myself *), and it is there to be used and abused.

    The syntax file definition is a work in progress.  Please comment with any suggestions or comments.  Also, remember that things may "break" in the meantime, so please test this a lot so we can debug it.

    Here are some examples:

    // F#
    let myString = "Hello world"

    // C#
    string myString = "Hello world";

    ' VB
    Dim myString as String = "Hello world"

    -- SQL
    select 'Hello world'


    Scott Isaacs - Tap My Mind | A ProF#ssional Geek
  •  02-26-2006, 12:07 75 in reply to 71

    Re: Coloring Your Code on The Hub

    let safari_OSX_reply = "Editor doesn't show up in Safari but testing to see if I can manually put in the code tags"
    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  02-26-2006, 12:10 76 in reply to 71

    Re: Coloring Your Code on The Hub

    let firefox_OSX_reply = "Editor shows up and places the tag but then you cannot enter any code between the begin tag and end tag manual entry as with Safari seems to work just fine."

    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  02-26-2006, 19:04 77 in reply to 76

    Re: Coloring Your Code on The Hub

    For Firefox, if you enter the code first, the select the text and click the button, does it work?  (As opposed to clicking the button then entering code between the tags.)

    I have sent an e-mail to the creator of the text editor to see what plans for support are.


    Scott Isaacs - Tap My Mind | A ProF#ssional Geek
  •  02-26-2006, 20:28 78 in reply to 76

    Re: Coloring Your Code on The Hub

    Fantastic - this will save hours - I wish I could use it for my power point too (perhaps I can via cut and paste?)

    Speaking of Safari and Opera - I have been told the F# website looks terrbile viewed through some browsers - I don't have any installed on my machine - if you've any feedback on what's going wrong it would of course be appreciated!

     

  •  02-26-2006, 21:13 79 in reply to 78

    Re: Coloring Your Code on The Hub

    Don,

    Yes, you can use this via cut and paste here.  Just open a "new forum post" (on any forum) as your temporary work area.  Be certain that when you cut and paste that the "cut" code to The Hub is "cleartext", i.e. does not contain any html.  If you cut and paste from VS, this should not be an issue, but if you cut and paste from your web pages or elsewhere, to The Hub, paste to your favorite text editor that will strip the html tags off of any target code.  For the moment, I use notepad just because I can count on "no formatting features" in notepad.

    When you are done with the code, just click on preview post, and the rendered html should have the necessary coloring that you need.  Cut and paste what you need.  Use this for all of your code coloring, i.e. if you need this for your public blog or presentations, use it.  As I mentioned in Hubology: F# source HTML color coding native on The Hub, we're talking with the addin author of this code, so when we get the F# stuff looking good (after "go live"), we'll make sure that he's got a good working copy that will be supported in all CS2.0 installations that run his addin (and an "F# code icon" on all of those desktops).

    Also, this is experimental, and Scott and I haven't gotten all of the coloring correct (I have questions on idioms and other language elements that I'll be reviewing), so let us know if you need a change.  If we are online, we can "turn a change around" in about 10 minutes.  Please also note that we color the "|" and other elements at the moment.  I know that source\vs\service.ml doesn't choose that method for coloring, so, I guess we've taken a little liberty as well.  Personally, there is not enough magenta and burnt sienna in F# code nowadays, two colors that would definitely provide for "metaprogramming quoted expressions" and "Matrix classes" respectively 8-)

    ---O

     


    My works made many a ring. I had an ideal setting at Berlin with Karl and Leopold.
  •  02-26-2006, 21:37 80 in reply to 76

    Re: Coloring Your Code on The Hub

    Scott and I are looking into "Free Text Box" (http://www.freetextbox.com/), the underlying tool for text entry that Community Server 2.0 uses.  We should have an answer in a day or two, but it sounds as though you have a workaround, albeit a clumsy one, that you can use.  Since "Firefox" is "Mozilla" and FTB supports Mozilla 4.0, if you have issues and we can make a reproducible case, we can raise that with the FTB team and have a clear path for bug fixes.  As far as Safari, I'm still looking at issues that may affect you and will need some time.  I know Safari passes the Acid2 test (as of April, 2005), but does Safari follow the Mozilla or another spec (W3C?) that we can use to discuss issues with the FTB team?  I know the basis for much of Safari is the KDE project and KHTML (or is that old news?).

    ---O

     


    My works made many a ring. I had an ideal setting at Berlin with Karl and Leopold.
  •  02-27-2006, 8:04 81 in reply to 80

    Re: Coloring Your Code on The Hub

    let reply_firefox_windows = "everything works just fine"

    It seems it's only Firefox and Safari on Mac OSX that have problems. I will test from Opera on Windows in just a second and see how that goes. Firefox on Windows seems to be working just fine.

    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  02-27-2006, 8:11 82 in reply to 81

    Re: Coloring Your Code on The Hub

    OK on Opera is where I am posting from now the editor does not show up but I can enter the tags manually.

    let reply_opera_windows = "same as Safari on Mac OSX. No code editor appears just a multi-text window for the reply and an edit control for the reply subject"
    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  02-27-2006, 8:14 83 in reply to 82

    Re: Coloring Your Code on The Hub

    I will test the F# website tonight from home from Safari and from Firefox on OSX. If it uses MSFT css though I can already tell you it will look horid in Safari. Firefox will handle the non-standard css and render it correctly unless you tell it not to. IE Brains-N-Brawn.com looks horrible from Safari but just fine from Firefox. I will test the F# site from Windows Firefox and Opera in just a minute and let you know how it looks.
    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  02-27-2006, 8:29 84 in reply to 83

    Re: Coloring Your Code on The Hub

    I have dual screens here at work so I put the F# site up in IE on one side and in Firefox and Opera on the other side and screen shot it. I will e-mail the png's to optionScalper so he can e-mail them to you so you can see a full size real life side-by-side. It looks best in IE, then firefox, then Opera. The text is so small in Opera that I have to re-do my settings to make it readable on some portions of the page. The screenshots are from before I reset my text sizes in Opera. This was done on Win2K pro.

    The Firefox version is: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

    The Opera version was: Version 8.52; Build 7721;

    Definition of Dylan: Sombody sat Lisp down and told it it was too clingy. Now it's bipolar.
  •  06-02-2006, 1:51 315 in reply to 84

    Re: Coloring Your Code on The Hub

    A post I made on another page, but thought I should summarise here: Is it possible (if this is a desirable change for others too) to make it that when something is F#-colour coded the word-wrap is also taken off? Some of my code goes beyond the edge of the page and I think it looks a lot nicer with everything lined up rather than with comments wrapping around etc...
  •  06-02-2006, 5:12 316 in reply to 315

    Re: Coloring Your Code on The Hub

    The best I could come up with for now is to add some HTML around your code.  If you switch the code editor from Design view to HTML view, you can add code like this before the first "paragraph" of code:

    <div style="overflow: scroll; width: 600px; white-space: nowrap; border: 1px solid black;">

    Don't forget to close with a </div> after your code.

    The important part is the "white-space: nowrap;".  The "overflow: scroll; width: 600px;" just does its best to preserve the layout of your site by putting the long code in a scrolling box 600px wide.  You can change 600 to any width you prefer to fit the design of the page you are posting to.  Here is an example, albeit in VB.

    'Longer lines
    Dim a as System.Data.SqlClient.SqlConnection = new System.Data.SqlClient.SqlConnection("some connection string in here;some connection string in here;some connection string in here;some connection string in here;")


    Scott Isaacs - Tap My Mind | A ProF#ssional Geek
  •  06-02-2006, 10:18 319 in reply to 316

    Re: Coloring Your Code on The Hub

    You may wish to edit that - you probably mean whitespace rather than whitesapce... But thanks :-)
  •  06-02-2006, 10:29 320 in reply to 319

    Re: Coloring Your Code on The Hub

    No, really, white-sapce is part of the CSS 4.0 spec.  Wink [;)]

    I've edited the post with this correction.  Thanks for catching it.


    Scott Isaacs - Tap My Mind | A ProF#ssional Geek
View as RSS news feed in XML
Powered by Community Server, by Telligent Systems