Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sytnax Highlighting

    I'm planning on writing a couple of functions to so customisable syntax highlighting for a number of languages (XHTML, CSS, PHP) that will output code that not only validates, but is neat.

    i've got two angles i can approach this from:

    A) A Wordlist in a predefined format that is updateable and read from the script.

    B) A syntax checker.

    eg for CSS i could either have:
    Code:
    [Properties]
    margin
    border
    border-left
    etc...
    [values]
    none
    inherit
    etc...
    Or i could say all text before a { is a selector, between { and : is a property, : to ; is value, and so on.

    what do you guys recommend?
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first one seems easier to code, simpler and more robust.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For a decent syntax highlighting you need your application to be able to read and understand the syntax. In other words, you need to write a parser. Not impossible to do, there's much literature out there, but it takes much more time than to collect a wordlist and put that through some regular expressions.

    EDIT: The wordlist approach will never be accurate. Option B is the only way to go.
    De gustibus non est disputandum.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, yeah i was thinking that.

    But then again if it only parses known tags then it'll work work like a spelling checker in a way, since if you spell a tag name wrong it wont be highlighted, might make this into a poll.

    This is still in early Dev and i'm unlikely to even start the coding for about a month. So I have plenty of time to plan it out.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #5
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,108
    Thanks
    11
    Thanked 101 Times in 99 Posts
    I looked at something similar once and recall thinking that the tokenizer functions may be of use ... like many of my `projects` it did not get that far
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wrote a couple of PHP syntax-highlighting scripts for XML/HTML and Javascript - if you'd like those? They're not perfect but they mostly work
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that'd be great for reference if you could.

    can you send them to webmaster@readme.reosurce-locator.com?
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried to post it here but there's too much parsing going on - I can't get the regexes to come through unaltered.

    I'll document it and post that later on.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use the "code" tag rather than the "php" tag. The latter tends to eat backslashes from regex code. Very annoying.
    De gustibus non est disputandum.

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or upload the file.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry .. I completely forgot about this :o It's maybe too late .. but here's the info anyway.

    The syntax files are attached to the next post (I tried code .. but it added mysterious spaces into some of the regexs..)

    The XML syntax file can handle any element or attribute name, including empty elements, but all attribute values must be double quoted; it can only handle HTML comments that come all on one line. The Javascript syntax file handles reserved words, parenthisese, braces, single-quote strings and single line comments (starting with //).

    The highlighting is done with CSS, and since the scripts aren't intelligent enough to differentiate things like instances of a reserved word in a comment or string, the visual output is tidied up with added descendent selectors, to ensure the highlighting is correct:
    Code:
    pre, em.codeComment, .codeString, .codeReserved, .codeParen, .codeBrace, .codeElement, .codeAttr {
    	font-family:"lucida console", "courier new", monotype;
    	}
    
    pre {
    	color:#333;
    	background-color:#fffffc;
    	}
    
    .genericColumn .codeComment, .codeComment .codeReserved, .codeComment .codeString, .codeComment .codeString .codeReserved, .codeComment .codeParen {
    	color:#f00;
    	}
    
    .codeString, .codeString .codeReserved, .codeString .codeParen {
    	color:#007777;
    	}
    
    .codeReserved {
    	color:#00c;
    	}
    
    .codeParen {
    	color:#900;
    	}
    
    .codeBrace {
    	color:#900;
    	}
    
    .codeElement {
    	color:#30b;
    	}
    
    .codeAttr {
    	color:#800000;
    	}
    Finally, to actually use it, you put PHP here-markers inside a <pre> block, then @include the syntax file, with a fail-condition to output the unparsed code, like this:
    Code:
    <ul class="skipCode">
    	<li><a href="#fig0-after" tabindex="6">Skip code example</a></li>
    </ul>
    <pre id="fig0">
    <?php
    $code = <<<endh
    &amp;lt;ul id="udm" class="udm"&amp;gt;
    	&amp;lt;li&amp;gt;&amp;lt;a href="/"&amp;gt;Home&amp;lt;/a&amp;gt;
    	&amp;lt;/li&amp;gt;
    	&amp;lt;li&amp;gt;&amp;lt;a href="/about/"&amp;gt;About&amp;lt;/a&amp;gt;
    	&amp;lt;/li&amp;gt;
    	&amp;lt;li&amp;gt;&amp;lt;a href="/contact/"&amp;gt;Contact&amp;lt;/a&amp;gt;
    	&amp;lt;/li&amp;gt;
    &amp;lt;/ul&amp;gt;
    endh;
    if(!@include ("scripts/syntax-xml.php")) { echo($code); }
    ?>
    </pre>
    Make sure there's no trailing whitespace at the end of any line within the <pre>, otherwise mozilla loses the line-break. It's also not perfect with HTML attributes - sometimes they don't get highlighted, and I don't know why.


    If you wanna see this in action have a look at my list-menu's user manual - like this page or this one
    Last edited by brothercake; 02-17-2004 at 02:26 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here are the syntax files
    Attached Files Attached Files
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •