Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

Nieuwe highlighters voor HTML en JavaScript \o/

Pagina: 1
Acties:
  • 169 views sinds 30-01-2008
  • Reageer

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Programming heeft al lange tijd mooie highlighters voor o.a. de meest obscure en ranzige programmeertalen, dus ik vond dat wij niet langer achter konden blijven. Bij deze presenteer ik U daarom ook de HTML en JavaScript syntax highlighters! \o/

Features HTML syntaxhighlighter

Naast syntax highlighting doet de HTML highlighter ook basic syntax checking en heeft het zelfs lint-like features. Highlighting wordt gedaan op basis van de gedefinieerde elementen in HTML4 Transitional en bijbehorende attributen.
Syntax checking is gebaseerd op de algemene syntaxregels regels voor HTML en de daarvoor gespecificeerde SGML-features waaronder shorthand markup. Dat laatste is nogal controversieel aangezien bijna geen enkele browser er support voor biedt :P Er is daarom ook gekozen voor een afwijkende kleur om bepaalde constructies die gebruik maken van de SHORTTAG feature zichtbaar te maken:
HTML:
1
2
3
4
5
6
7
8
9
10
11
NET tags:
  <p/dit is valid HTML/

closed start tag:
  <p<strong>dit is valid HTML</strong>

empty start tag:
  <>

empty end tag:
  </>
enkel het 2e voorbeeld was technisch gezien lastig afwijkend te highlighten...

Het is en blijft echter in 1e instantie een highlighter en is geenszins een validator! Keep that in mind ;)

verder nog wat voorbeelden:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<embed> onbestaand element </embed>
<h1 foo='bar'> onbestaand attribuut </h1>
<img src="foo.gif"> end-tag niet toegestaan: </img>
<br /> NET tag (zie ook boven); strict genomen is de > content, maar wordt door de meeste browsers genegeerd
<p align=left> deprecated attribuut </p>
<font face="verdana"> deprecated element </font>
<body bgcolor=#000000> non-name karakter in attribuut buiten quotes </body>
<a href="foo.html?id=1&bar=2"> unencoded ampersand in attribuutwaarde (eigenlijk: niet bestaande entity 'bar') </a>
<input type="text" disabled> boolean attribuut
<input type="text" disabled="disabled"> zo mag het ook
<input type="foo"> Ongeldige attribuut-waarde
<body onload="javascript:init()"> javascript: pseudo-protocol in event-handlers
<input value="<?php echo $foo; ?>"> serverside pre-processing als attribute-value

en natuurlijk &foo: niet bestaande entities in content


Waarom op basis van HTML4 Transitional?

Omdat dat op dit moment de meest gebruikte opmaaktaal is op het web :)

Het verschil met Strict is ook niet zo groot; wat in Strict niet is toegestaan is in Transitional in bijna alle gevallen ook deprecated en zal dus ook zo worden gehighlight. Uitzonderingen zijn o.a. het name-attribuut voor bv form-elementen en het target-attribuut voor anchors, en het iframe-element. Daar valt m.i. wel overheen te komen; de meeste authors die Strict hanteren weten de weg naar de specificatie en de validator wel te vinden ;)

What about XHTML?

Aangezien 99% van de pagina's met een XHTML DTD als HTML worden verstuurd en dus ook zo worden behandeld door browsers (it's not in the doctype, it's in the mime-type) doet deze highlighter precies wat het moet doen :P
XHTML vergt net als dat het een andere parser voor browsers vereist eigenlijk ook een andere highlighter; de syntax-rules wijken immers af en er wordt anders met bepaalde zaken omgegaan (denk bijvoorbeeld aan HTML-style comments in style- en scriptblokken, case-sensitivity, geen minimizations etcetera). De vraag is of er behoefte aan is, persoonlijk zie ik XHTML als een lost-case op webdevelopment gebied...

En (X)HTML5?

Is nog in ontwikkeling, is geen echte standaard (maar een voorstel vanuit een werkgroep van browservendors - WHATWG) en kent nog maar weinig echte implementaties. Itt XHTML2 is het in mijn ogen wel een interessante ontwikkeling, en gezien het feit dat het backwards-compatible zal zijn met HTML acht ik het niet onmogelijk dat daar in de toekomst ook in de highlighter rekening mee gehouden zal worden :)

En valt er nog wat nuttigs te melden over de javascript highlighter?

Mwa, behalve dat dat wel enkel en puur een highlighter is, aangeroepen kan worden zowel met [code=js] als [code=javascript] en hij verdacht veel lijkt op de java-highlighter eigenlijk niet zoveel.
Hij biedt o.a. wel support voor de RegExp literal en een aantal special properties zoals window, document en navigator.

En als ik nou geen lijpe kleurtjes wil?

Dan gebruik je gewoon de [code]-tag zonder language-toevoeging ;)

Mag ik het stukmaken? / Ik zie een bug!

Ja dat mag / Ja dat kan :)
Post hier je ranzigheid en ik zal kijken of ik het kan fixen :)


Speciale dank aan moto-moi voor het compileren met de laatste versie flex en g++ :*

Intentionally left blank


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Lijstje van beschikbare highlighters: c, c++, c#, java, delphi/pascal, vb, vb.net, php, css, xml, xpath, sql, html, js/javascript

Intentionally left blank


  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 22-11 12:05

MAZZA

Barbie is er weer!

Handig :) Ik kom gewoon hier debuggen vanaf nu :P

[ Voor 69% gewijzigd door MAZZA op 07-04-2006 00:16 ]


  • Osiris
  • Registratie: Januari 2000
  • Niet online
HTML:
1
<div><span>foo</div>bar</span>


Hmm, dit vind ie blijkbaar prima? Of hoort de highlighter dat soort dingen er niet uit te pikken? :o

  • moto-moi
  • Registratie: Juli 2001
  • Laatst online: 09-06-2011

moto-moi

Ja, ik haat jou ook :w

Welk gedeelte van
Het is en blijft echter in 1e instantie een highlighter en is geenszins een validator! Keep that in mind ;)
heb je niet begrepen ? ;)

God, root, what is difference? | Talga Vassternich | IBM zuigt


  • Wwwillem
  • Registratie: Juni 2005
  • Niet online
Supergoed! _/-\o_ Zal de boel hier in webdesign een stuk sneller door te nemen maken, highlighting helpt om code in 1 oogopslag goed te overzien.

  • Osiris
  • Registratie: Januari 2000
  • Niet online
moto-moi schreef op vrijdag 07 april 2006 @ 00:20:
Welk gedeelte van
[...]
heb je niet begrepen ? ;)
Jaaa, nou, ik dacht, da's zó simpel, dat zit er vast ook wel in 8)7

/me Kruipt weer snel mompelend terug in z'n hoekje *

  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

moto-moi schreef op vrijdag 07 april 2006 @ 00:20:
Welk gedeelte van
[...]
heb je niet begrepen ? ;)
Plus dat het (in HTML) gewoon valid is. Pas bij xHTML komt de well-formedness om de hoek kijken... :)

Over de highlighters, ik vind het toppie dat er (na lang wachten, want hoopte er al lang op) dat er een highlighter kwam voor HTML... :) Dat er nu zelfs JS highlighting is, is alleen maar mooi meegenomen! :Y) Hulde aan de makers!

[ Voor 31% gewijzigd door CH4OS op 07-04-2006 00:53 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
GJ-tje schreef op vrijdag 07 april 2006 @ 00:52:
[...]
Plus dat het (in HTML) gewoon valid is. Pas bij xHTML komt de well-formedness om de hoek kijken... :)
Dat heeft niets met well-formedness te maken. Het is verkeerde nesting en dat is in HTML ook niet toegestaan. HTML parsers passen echter tot op zekere hoogte wel error-correction toe - jammer genoeg is error-correction in HTML4 undefined en dus browser-specific. HTML5 kent wel gespecificieerde error-correction :)

De highlighter beperkt zich mbt foutmeldingen echter tot pure syntax; nesting en dergelijke wordt niet gechecken - dan zou het ook geen highlighter meer zijn maar een validator, en dan zou DTD ook uit moeten maken.

[ Voor 18% gewijzigd door crisp op 07-04-2006 01:01 ]

Intentionally left blank


  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 16:58

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Even alleen mijn complimenten :) Heb het geprobeerd stuque te maken, maar wilde niet lukken. Erg netjes, ziet er goed uit.

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Overigens is de CSS-highlighter ook geupdate en zijn er een aantal bugs in andere highlighters gefixed. Een trivial case als dit gaat nu goed (plus dat de CSS highlighter nu ook HTML-elementen in selectors herkent):
Cascading Stylesheet:
1
table { display: table; }

Intentionally left blank


  • CH4OS
  • Registratie: April 2002
  • Niet online

CH4OS

It's a kind of magic

crisp schreef op vrijdag 07 april 2006 @ 00:55:
Dat heeft niets met well-formedness te maken. Het is verkeerde nesting en dat is in HTML ook niet toegestaan. HTML parsers passen echter tot op zekere hoogte wel error-correction toe - jammer genoeg is error-correction in HTML4 undefined en dus browser-specific. HTML5 kent wel gespecificieerde error-correction :)
Wel raar dan, dat ik in de tutorials over xHTML altijd lees, dat je vanaf xHTML altijd je well-formedness goed moet hebben? Het is namelijk toch wel zo, dat je als je via XSL / XSLT een XML file parsed, alleen maar xHTML uit kan poepen? En dan is de well-formedness wel degelijk belangrijk... :)

Maar dit is way off-topic... ;)

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
GJ-tje schreef op vrijdag 07 april 2006 @ 01:00:
[...]
Wel raar dan, dat ik in de tutorials over xHTML altijd lees, dat je vanaf xHTML altijd je well-formedness goed moet hebben? Het is namelijk toch wel zo, dat je als je via XSL / XSLT een XML file parsed, alleen maar xHTML uit kan poepen? En dan is de well-formedness wel degelijk belangrijk... :)

Maar dit is way off-topic... ;)
XHTML is in feite een subset van XML en moet dus wellformed zijn. Dit is echter een highlighter en geen validator, maar basic syntax wordt wel gechecked (aan de hand van de SGML rules). Daarbij wordt XHTML - zoals ik al zei in de startpost - meestal met text/html mimetype verstuurd, dus gelden de regels voor HTML en niet die voor XML ;)

Er is overigens ook een XML-highlighter (maar dat is echt puur een highlighter)

Verder is er niets dat je belet om middels XSL/XSLT vanuit X(HT)ML HTML te genereren - die output hoeft niet wellformed te zijn.
Like I said: XHTML is een lost case; 99% van de XHTML pagina's op het web worden als HTML verstuurd. 80% daarvan valideerd niet, is niet well-formed en/of zou met een XHTML mimetype niet werken zoals bedoelt...

[ Voor 25% gewijzigd door crisp op 07-04-2006 01:28 ]

Intentionally left blank


  • Larixk
  • Registratie: Juli 2001
  • Laatst online: 22-06-2024

Larixk

met xk, ja

en de js syntax highlighter is natuurlijk ook redelijk bruikbaar voor AS.

goed werk!

larixk


Verwijderd

Mag ik de eerste zijn die de JavaScript highlighter stuk maakt?
JavaScript:
1
2
3
4
// Support voor multi-line strings?
var s = 'Ik ben een \
    hele lange \
    string!';


Voor de rest: heel knap gedaan!

[ Voor 162% gewijzigd door crisp op 20-04-2006 08:32 ]


  • Peter
  • Registratie: Januari 2005
  • Laatst online: 21-11 22:36
netjes gedaan hoor, maar nog niet bugfree :)

Verwijderd

ziet er netjes uit crisp! goede keuzes mbt (x)html. Als mensen echt xhtml doen, dan kan je natuurlijk gewoon de xml highlighter gebruiken (als in [code=xml] opgeven), maar dit komt nog steeds heel erg weinig voor natuurlijk

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

HTML:
1
<!--#include virtual="whatever" -->

edit:
Paars! :P

[ Voor 32% gewijzigd door Rowanov op 07-04-2006 08:54 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 19-11 11:08

André

Analytics dude

Ziet er goed uit d:)b

  • giMoz
  • Registratie: Augustus 2002
  • Laatst online: 16-11 16:38

giMoz

iets met meester...

ziet er zeker goed uit....

geen Feature voorbeelden van de javascript syntaxhighlighter?

Of niet natuurlijk...


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Verwijderd schreef op vrijdag 07 april 2006 @ 08:27:
Mag ik de eerste zijn die de JavaScript highlighter stuk maakt?
Ah, daar had ik inderdaad niet aan gedacht. Lokaal fixed :)

Intentionally left blank


Verwijderd

crisp schreef op vrijdag 07 april 2006 @ 10:08:
Ah, daar had ik inderdaad niet aan gedacht. Lokaal fixed :)
Ach, mijn editor jEdit ondersteunt het ook niet, dus het is geen schande, hoor :)

Verwijderd

HTML:
1
2
<input type="text" disabled> boolean attribuut in geminimaliseerde vorm
<input type="text" disabled=disabled> zo mag het ook (normale vorm)


"disabled" in het eerste geval is hier de waarde, niet het attribuut en zou dus eigenlijk rood moeten worden, net als in het tweede geval

HTML:
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
for (var i=0; i<n; i++) {}
c = (n&b)
</script>

<pre>
for (var i=0; i<n; i++) {}
c = (n&b)
</pre>

netjes

[ Voor 63% gewijzigd door Verwijderd op 07-04-2006 10:36 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Verwijderd schreef op vrijdag 07 april 2006 @ 10:22:
HTML:
1
2
<input type="text" disabled> boolean attribuut in geminimaliseerde vorm
<input type="text" disabled=disabled> zo mag het ook (normale vorm)


"disabled" in het eerste geval is hier de waarde, niet het attribuut en zou dus eigenlijk rood moeten worden, net als in het tweede geval
nope, check maar in bijvoorbeeld Mozilla's DOM inspector; het is de nodeName van het attribuut en de value is leeg ;)

Intentionally left blank


Verwijderd

foutje van mozilla dan denk ik (de value zou true of false moeten zijn in de dom):

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2
In HTML, boolean attributes may appear in minimized form -- the attribute's value appears alone in the element's start tag. Thus, selected may be set by writing:

<OPTION selected>

[ Voor 66% gewijzigd door Verwijderd op 07-04-2006 11:11 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Verwijderd schreef op vrijdag 07 april 2006 @ 11:08:
foutje van mozilla dan denk ik (de value zou true of false moeten zijn in de dom):

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2


[...]
Dat spreekt eigenlijk weer tegen wat er boven staat:
Some attributes play the role of boolean variables (e.g., the selected attribute for the OPTION element). Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".
:P

Intentionally left blank


Verwijderd

dacht ik eerst ook, maar het ligt zo
je hebt een boolean (een property van het element) die wordt voorgesteld door een attribuut/waarde paar, het voorkomen van het attribuut (+waarde) impliceert dat de boolean true is, het afwezig zijn impliceert false. De waarde van het attribuut kan alleen gelijk zijn aan de naam van het attribuut (en de boolean)

verder (en da's een ander punt) kan je attributen die een boolean representeren afkorten door alleen de waarde neer te zetten

ik heb volgens mij eens het sgml verhaal ervan gelezen, maar geen idee waar...

edit
@hieronder: true, maar is wel mythebevestigend zo (maar idd: so what)
NET shorttags zijn wat dat betreft belangrijker, want die geven in het dagelijks leven wel problemen

[ Voor 19% gewijzigd door Verwijderd op 07-04-2006 12:21 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Dan nog, qua highlighting is het logischer om 'm als attribuut te highlighten ipv als value. Het boeit m.i. verder ook niet zo :P

Intentionally left blank


  • Tjeemp
  • Registratie: Januari 2005
  • Laatst online: 03-01-2015

Tjeemp

BEER N TEA

zo'n beetje wat elke editor op die manier weergeeft... allemaal als attribute en niet als value :P

www.timovanderzanden.nl | Beer 'n' Tea


Verwijderd

misschien als featurerequest: verschil aangeven tussen correcte (x)html doctypes en onvolledige.
hier vang je ook een hoop boxmodel problemen al vrij snel mee op denk ik

verder misschien nog een idee om in al die spans met title attributen aan te geven wat voor soort iets het is, bijvoorbeeld "deprecated element/attribuut" of "invalid syntax" oid

  • CaptBiele
  • Registratie: Juni 2002
  • Laatst online: 27-08-2021

CaptBiele

No Worries!

superhulde aan crisp ;)

dit maakt het weer wat eenvoudiger om de topics snel door te lezen.

  • Juup
  • Registratie: Februari 2000
  • Niet online
JavaScript:
1
/* aap/beer */


Buiten dit kleine dingetje krijg ik hem niet kapot, ook niet met hele wazige code. Hulde aan crisp!

[ Voor 56% gewijzigd door Juup op 10-04-2006 23:35 ]

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.


  • Koeniepoenie
  • Registratie: Oktober 2003
  • Laatst online: 14-11 13:12
HTML:
1
[img]"woei.jpg"[/img]

Hm, beetje foutje :P Ik was wat aan het proberen toen ik per ongeluk op Verstuur drukte :X Ik dacht namelijk even dat de kleuren van /> niet correct waren, maar dat zijn ze dus wel.. O-)

[ Voor 72% gewijzigd door Koeniepoenie op 11-04-2006 08:24 ]

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337


Verwijderd

HTML:
1
2
3
4
5
6
7
8
9
10
<!-- woei -->                <p>
<!-- -- woei -- -->          <p>
<!-- --- woei --- -->        <p>
<!-- ---- woei ---- -->      <p>
<!-- ---- woei -->-- -->     <p>
<!-- ---- woei ----> -->     <p>
<!-- ---- woei --> -->       <p>
<!-- ---- woei -- -->        <p>
<!-- ---- woei -- -- >       <p>
<!-- ---- woei -- -->        <p>


works like a charm, inclusief die ene weggecommente <p>

(zie ook dit topic: [rml][ HTML] Comment-bug in FireFox?[/rml], ook voor uitleg hoe het nu precies zit)

even een raar verzinsel van pelle copy paste:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html>
<head>
    <title></title>
</head>

<body>

<!-- | WTF ?! | ----------- -->
<h1>
    Dit is dus echt raar
</h1>


<!-- | MELP | ----------- -->
<p>
    Ja, zeg dat wel...
</p>

<!-- | THINGS ARE GETTING BETTER | ----------- --> -->
<p>
    Nog een paragraaf.
</p>


<!-- | OR NOT? | ----------- -->
<p>
    En weer eentje
</p>


</body>
</html>

check:
Afbeeldingslocatie: http://www.jellejanvanveelen.nl/got/test3.png

werkt zelfs beter dan fx vind ik, het laatste stukje code is allemaal comment en dit wordt nooit meer afgesloten, de highlighter geeft dit netjes aan (als missing closing tag oid), fx doet wat errorcorrection en laat dus de sgml opening weg zodat de html toch werkt.
(onder voorbehoud dat ik de "--" goed geteld heb :))

enige opmerking dat hier SGML dingen zwart zijn, terwijl ze elder roze zijn (DOCTYPE en SHORTTAG)

Dat brengt me op:
HTML:
1
2
3
4
5
<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >


maar goed, da's misschien weer wat veel gevraagd (Hoewel je alles tussen "<!" en ">", wat geen comment is als SGML zou kunnen zien, dus rose, alles tussen "--" en "--" is dan comment en paars. Dat zou dan automatisch werken voor doctype lijkt me, pakt de SGML in comments ook mee (of eigenlijk dan andersom, de comments in SGML) en werkt ook op dit soort dingen

HTML:
1
2
3
4
<![CDATA[
 <an> example of <sgml> markup that is
 not <painful> to write with < and such.
]]>

die zou daar ook in vallen

PI's kunnen voorkomen bij het aanroepen van plugins (mathplayer of svgviewer)
HTML:
1
2
3
4
5
6
7
8
9
w3c:
<?>
<?style tt = font courier>
hier wordt niks tussendoor afgesloten
<?page break>
<?experiment> ... <?/experiment>
mathplayer:
<?import namespace="mml" implementation="#mathplayer"?>
deze wordt wel afgesloten

hier gaat ook iets fout... (PI's staan tussen "<?" en ">" niet "<?" en "?>", hoewel die er wel vaak bijgepropt wordt)
Hier kom je natuurlijk in de problemen in het geval van php, maar daar zou je dan een uitzondering voor moeten maken.

[ Voor 237% gewijzigd door Verwijderd op 11-04-2006 10:20 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Juup schreef op maandag 10 april 2006 @ 23:28:
JavaScript:
1
/* aap/beer */


Buiten dit kleine dingetje krijg ik hem niet kapot, ook niet met hele wazige code. Hulde aan crisp!
Die clashed met de regexp matching; lokaal fixed :)

Intentionally left blank


  • funkwurm
  • Registratie: December 2005
  • Laatst online: 22-02-2021
Netjes Crisp, mijn UltraEdit kent multi-line ook niet, en gaat zelfs de mist in bij:
Cascading Stylesheet:
1
table { display: table; }

UltraEdit heeft wel multi-highlightning :9

Dus als je je nou echt geliefd wil maken, maak dan een code=web waarin initieel HTML wordt gehighlight, maar waarin alles tussen <?php ?> ook als php gehighlight wordt, evenzo voor <style etc.> als css en <script type="text/javascript"> als javascript.

En, en, en, zou het misschien mogelijk zijn dat vervolgens alles tussen echo(' en '); weer als HTML wordt herkent, en alles tussen mysql_query(' en '); als SQL :9~. Als we het dan toch over ownage highlightning hebben.

* funkwurm fantaseert over inline css-highlightning bij <span style="font-size:10pt">

  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
En, en, en, zou het misschien mogelijk zijn dat vervolgens alles tussen echo(' en '); weer als HTML wordt herkent,
Helemaal niet nodig, je hoort je HTML uit je code te houden :p Alles tussen ' ' wordt gewoon als string herkend.
en alles tussen mysql_query(' en ')
is weer een string ;) Overigens kan je SQL ook buiten je code houden.

March of the Eagles


  • djluc
  • Registratie: Oktober 2002
  • Laatst online: 16:33
Voor SQL in je code is zeker nog wel wat te zeggen, maar dat gaat totaal niet meer over dit topic: HTML en JS highlighters... ;) Mooi werk Crisp!

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Verwijderd schreef op dinsdag 11 april 2006 @ 09:02:
[...]

works like a charm, inclusief die ene weggecommente <p>

(zie ook dit topic: [rml][ HTML] Comment-bug in FireFox?[/rml], ook voor uitleg hoe het nu precies zit)

Die comments heb ik inderdaad volgens de regels geimplementeerd vziw ;)
[...]

enige opmerking dat hier SGML dingen zwart zijn, terwijl ze elder roze zijn (DOCTYPE en SHORTTAG)

Dat brengt me op:
[...]

maar goed, da's misschien weer wat veel gevraagd (Hoewel je alles tussen "<!" en ">", wat geen comment is als SGML zou kunnen zien, dus rose, alles tussen "--" en "--" is dan comment en paars. Dat zou dan automatisch werken voor doctype lijkt me, pakt de SGML in comments ook mee (of eigenlijk dan andersom, de comments in SGML) en werkt ook op dit soort dingen

Dat kan inderdaad nog wel wat uitgebreid worden. Ik denk dat ik binnen dergelijke constructs echter niet te ver moet gaan qua syntax-checking (DOCTYPE wellicht uitgezonderd). Het is wel leuk als hij ELEMENT, ATTLIST etcetera herkent, maar de individuele syntax van dergelijke secties is nou niet echt boeiend voor een HTML-highlighter ;)
[...]

hier gaat ook iets fout... (PI's staan tussen "<?" en ">" niet "<?" en "?>", hoewel die er wel vaak bijgepropt wordt)
Hier kom je natuurlijk in de problemen in het geval van php, maar daar zou je dan een uitzondering voor moeten maken.

PI's zijn inderdaad nog niet foolproof, maar da's eenvoudig te verhelpen :)

Intentionally left blank


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
SGML Markup, Marked Sections en PI's heb ik lokaal verbeterd; eens kijken of ik moto-moi zo ver kan krijgen om eerdaags een nieuwe highlighter te compileren :)

Intentionally left blank


  • killercow
  • Registratie: Maart 2000
  • Laatst online: 20-11 13:15

killercow

eth0

Persoonlijk vindt ik de output niet echt je van het.

mijn syntax checker is misschien niet zo tof, maar de output is tenminste niet zo'n rotzooi als wat deze produceert:

http://boa.innerheight.com/parse/syntax_html/syntax_html.php

Verder Kudos to Crisp voor de waarschijnlijk prachtige regexes.

openkat.nl al gezien?


  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 16:58

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
killercow: jouw output werkt alleen met JS, die van crisp zonder, en dat is imo wel wat waard. Dat de output (neem aan dat je het over de html output hebt) daardoor meer (wil niet zeggen rommelig) is, is imo dan prima.

  • moto-moi
  • Registratie: Juli 2001
  • Laatst online: 09-06-2011

moto-moi

Ja, ik haat jou ook :w

Ben ik niet met je eens
Jouw systeem: 28 fouten

gathering.tweakers.net: 1 foutje
Oftewel, alles is relatief ;)
Al moet ik zeggen dat die van jou wel erg cool zit met dat on-the-fly editten enzo :)

God, root, what is difference? | Talga Vassternich | IBM zuigt


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
killercow schreef op woensdag 19 april 2006 @ 19:23:
Persoonlijk vindt ik de output niet echt je van het.

mijn syntax checker is misschien niet zo tof, maar de output is tenminste niet zo'n rotzooi als wat deze produceert:

http://boa.innerheight.com/parse/syntax_html/syntax_html.php
Jouw output is net als de output van de GoT highlighter gewoon een bunch of spans met classes, dus ik zie weinig verschil (behalve dan dat 'ie verre van perfect is - zie mijn voorbeelden van SGML minimization en mophor's comment-cases ;) )
Verder Kudos to Crisp voor de waarschijnlijk prachtige regexes.
Qua regexes valt het wel mee; het is meer een tokenizer met een aantal states; matching is dus vrij simpel:

"<{Name}" -> begin van een starttag
"</{Name}" -> begin van een endtag
"<!" -> begin van een SGML markup sectie
"<?" -> begin van een processing instruction

dan ga je dus over naar een andere state en match je daarbinnen verder op attributen, properties etcetera totdat je bijvoorbeeld "/" of ">" tegenkomt en ga je terug naar de initial state.
Dat biedt je veel meer flexibiliteit en is veel minder foutgevoelig - in fact, het is zoals een parser ook te werk gaat. Ik zou dit soort dingen niet (meer) met puur reguliere expressies op willen lossen...

[ Voor 5% gewijzigd door crisp op 19-04-2006 21:57 ]

Intentionally left blank


  • BalusC
  • Registratie: Oktober 2000
  • Niet online

BalusC

Carpe diem

Ziet er goed uit d:)b

  • killercow
  • Registratie: Maart 2000
  • Laatst online: 20-11 13:15

killercow

eth0

ik doelde meer op de list items icm css om de verschillende regels te showen. waar GOT dus een onduidelijke brij van br's gebruikt. De spans met classes zijn volgens mij bijna 100% zeker nodig. ik kan iig niet echt een andere/mooiere oplossing bedenken om de syntax er netjes in te krijgen.

Mijn bouwsel is niets meer dan een lab-testje om te kijken of ik een en ander simpel on bouwen.
antwoord is blijkbaar ja, maar voor het echte werk heb ik inderdaad ook een tokenizer.

De in dit topic geposte (x)html is trouwens vreselijk handig om zo'n ding grondig te testen. voor alsnog weinig problemen gevonden, maar als mensen nog meer zooi/html hebben denk ik dat zowel ik als crisp er erg blij mee zouden zijn.

Volgens mij is m'n tokenizer wel redelijk stabiel, maar ik durf hem nog niet op een productie machine te gooien, daar hij ook af en toe wel eens een dikke endless loop gegeven heeft.

En nu validate mijn output wel :P

[ Voor 4% gewijzigd door killercow op 19-04-2006 22:40 ]

openkat.nl al gezien?


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
De gegenereerde markup van de door ons gebruikte highlighter is eenvoudig aan te passen, maar op zich vind ik de linebreaks nou ook niet echt lelijk...

Intentionally left blank


  • killercow
  • Registratie: Maart 2000
  • Laatst online: 20-11 13:15

killercow

eth0

neuh, echt heeeel erg lelijk is het niet, zeker niet als je het totaal in ogenschouw neemt. maar dat was het enige puntje dat ik kon bedenken :) (knap werk dus crisp)

openkat.nl al gezien?


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

killercow schreef op woensdag 19 april 2006 @ 22:41:
neuh, echt heeeel erg lelijk is het niet, zeker niet als je het totaal in ogenschouw neemt. maar dat was het enige puntje dat ik kon bedenken :) (knap werk dus crisp)
Zou je dan voortaan wellicht iets beter nadenken wat je post..

Dit komt, mijn inziens, dan redelijk flamerig overig:
Persoonlijk vindt ik de output niet echt je van het.

mijn syntax checker is misschien niet zo tof, maar de output is tenminste niet zo'n rotzooi als wat deze produceert:

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
killercow schreef op woensdag 19 april 2006 @ 22:27:
Volgens mij is m'n tokenizer wel redelijk stabiel, maar ik durf hem nog niet op een productie machine te gooien, daar hij ook af en toe wel eens een dikke endless loop gegeven heeft.
Een tokenizer zou nooit mogen loopen tenzij je hele rare dingen doet zoals geen globale EOF-check of gematchede input teruggooien naar je inputstream zonder van state te wisselen...

Intentionally left blank


  • moto-moi
  • Registratie: Juli 2001
  • Laatst online: 09-06-2011

moto-moi

Ja, ik haat jou ook :w

crisp schreef op woensdag 19 april 2006 @ 16:24:
eens kijken of ik moto-moi zo ver kan krijgen om eerdaags een nieuwe highlighter te compileren :)
Tis nachtwerk geworden :'( Maar hij staat inmiddels online :P

God, root, what is difference? | Talga Vassternich | IBM zuigt


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
JavaScript:
1
2
3
4
// Support voor multi-line strings?
var s = 'Ik ben een \
    hele lange \
    string!';

JavaScript:
1
/* foo/bar */

HTML:
1
2
3
4
5
<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

HTML:
1
2
3
4
<![CDATA[
 <an> example of <sgml> markup that is
 not <painful> to write with < and such.
]]>

HTML:
1
2
3
4
5
6
7
8
9
w3c:
<?>
<?style tt = font courier>
hier wordt niks tussendoor afgesloten
<?page break>
<?experiment> ... <?/experiment>
mathplayer:
<?import namespace="mml" implementation="#mathplayer"?>
deze wordt wel afgesloten

:)

Intentionally left blank


  • killercow
  • Registratie: Maart 2000
  • Laatst online: 20-11 13:15

killercow

eth0

BtM909 schreef op woensdag 19 april 2006 @ 22:55:
[...]

Zou je dan voortaan wellicht iets beter nadenken wat je post..

Dit komt, mijn inziens, dan redelijk flamerig overig:
[...]
mee eens :'( (was vast te laat voor mij)
crisp schreef op woensdag 19 april 2006 @ 23:19:
[...]

Een tokenizer zou nooit mogen loopen tenzij je hele rare dingen doet zoals geen globale EOF-check of gematchede input teruggooien naar je inputstream zonder van state te wisselen...
Dat laatste was dus precies wat er gebeurde, (ik laat hem recursief de html tree doorlopen, en in sommige onduidelijke stukken html moest ik belsuiten terug te springen naar een hoger stuk code om zo de tree weer wat recht te trekken.

openkat.nl al gezien?


  • Phenomenon
  • Registratie: December 2000
  • Laatst online: 20-11 13:18
Kon deze highlighter niet gewoon gebruikt worden? Bied ondersteuning voor tig talen en ook nog open source.

Niet dat wat hier nu kotm niet goed is, maar leek me makkelijker, maar ach daarvoor is het nu toch al te laat he :)

  • moto-moi
  • Registratie: Juli 2001
  • Laatst online: 09-06-2011

moto-moi

Ja, ik haat jou ook :w

Geen idee waarom we die highlighter van .oisyn gebruiken, tis nou eenmaal zo, en we kennen de code vrij goed (als de helft van de code nog origineel is dan is het veel :+ ).

Sowieso is degene die jij aanwijs geschreven in php, dus ik vraag me af hoe zijn snelheid t.o.v. onze c++/flex highlighter ligt :)

God, root, what is difference? | Talga Vassternich | IBM zuigt


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Ik zie ook niet waarom we een andere highlighter zouden moeten gebruiken als die van ons prima voldoet ;)

Intentionally left blank


  • moto-moi
  • Registratie: Juli 2001
  • Laatst online: 09-06-2011

moto-moi

Ja, ik haat jou ook :w

Sure, wisselen zou dom zijn, maar de initiele reden waarom we met deze zijn begonnen weet ik eigenlijk niet :)

God, root, what is difference? | Talga Vassternich | IBM zuigt


  • Phenomenon
  • Registratie: December 2000
  • Laatst online: 20-11 13:18
crisp schreef op donderdag 20 april 2006 @ 12:34:
Ik zie ook niet waarom we een andere highlighter zouden moeten gebruiken als die van ons prima voldoet ;)
Oooh nee dat zou ik nu ook niet meer doen :) Maar omdat die link die ik gaf tig talen heeft. Misschien had je er wat aan.

of niet natuurlijk ;)

Verwijderd

HTML:
1
2
3
4
5
6
7
8
9
10
<!-- woei -->                <p>
<!-- -- woei -- -->          <p>
<!-- --- woei --- -->        <p>
<!-- ---- woei ---- -->      <p>
<!-- ---- woei -->-- -->     <p>
<!-- ---- woei ----> -->     <p>
<!-- ---- woei --> -->       <p>
<!-- ---- woei -- -->        <p>
<!-- ---- woei -- -- >       <p>
<!-- ---- woei -- -->        <p>


hier zie je nu ook goed wat er aan de hand is, welke ">" een sluittag is, welke comment, welke data, welke woei sgml is, welke (sgml) comment.

klein miereneukertje nog: in de 3e staat het 5e streepje zwart, zou roze moeten zijn net als "woei" (is sgml)

imho een erg goede verbetering (had Pelle ongetwijfeld geholpen :P)

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Verwijderd schreef op donderdag 20 april 2006 @ 17:25:
klein miereneukertje nog: in de 3e staat het 5e streepje zwart, zou roze moeten zijn net als "woei" (is sgml)
Ik heb er bewust voor gekozen om binnen SGML markup enkel name, numbers en strings roze te highlighten en losse non-name characters zwart te laten. Zie ook:
HTML:
1
2
3
4
5
<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

;)

Intentionally left blank


Verwijderd

oe, dan is het helemaal erg netjes,
petje af

HTML:
1
2
3
4
<p><?php echo (3>6)?'a':'b'?></p>
<p><? echo (3>6)?'a':'b'?></p>
<p><?= echo (3>6)?'a':'b'?></p>
<p><?php= echo (3>6)?'a':'b'?></p>


(weet eigenlijk niet eens of die 4e mag)

maar hier was die groene muk om begonnen dacht ik. nr 1 is er wellicht nog uit te vissen, maar je komt erg in de knoei met de pi's volgens mij zo.

nr 3 is er misschien ook uit te vissen als er alleen word chars na die ? mogen voor een pi, maar dat weet ik niet zeker, kan het zo gauw even niet terug vinden, html appendix b.3.6 zegt er iig niets over

[ Voor 87% gewijzigd door Verwijderd op 21-04-2006 18:10 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Highlighting binnen highlighting; oftewel de html-highlighter kan nu ook inline javascript, vbscript en CSS highlighten :)

voorbeeld:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title/woei!/
<style type="text/css">

/* CSS */
body { margin: 0; padding: 0; }

</style>
</head>
<body>
<script type="text/javascript">

  // javascript
  document.write('Hallo Wereld!');

</script>
</html>

[ Voor 3% gewijzigd door crisp op 17-08-2006 12:08 ]

Intentionally left blank


  • André
  • Registratie: Maart 2002
  • Laatst online: 19-11 11:08

André

Analytics dude

_o_

Heel cool, ik heb vaak gedacht "dat zou wel eens handig zijn", en nu is het er gewoon.

  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
:D _/-\o_

Kan ik alles mooi in 1 codeblok stoppen :9

March of the Eagles


  • 2mb
  • Registratie: Mei 2004
  • Laatst online: 21-11 23:47

2mb

Heel mooi crisp! Ik denk dat ik GoT's notepad maar als standaard webdev editor ga gebruiken, de highlighting is hier nu nog beter dan in de meeste standalone editor's _/-\o_

Mijn muziek op SoundCloud - Speel online rikken - Maak muziek in je browser


  • Osiris
  • Registratie: Januari 2000
  • Niet online
André schreef op donderdag 17 augustus 2006 @ 12:25:
Heel cool, ik heb vaak gedacht "dat zou wel eens handig zijn", en nu is het er gewoon.
Jep, zomaar O-) :+

Nice work trouwens crisp d:)b, hij gaat uit van de type-attribuut neem ik aan overigens?

  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Kickje, hoort dit zo ?

PHP:
1
2
3
4
5
6
echo '<?xml version="1.0" standalone="yes"?>';

function zooiCode ()
{
    echo 'blaat';
}

March of the Eagles


  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 16:58

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
PHP:
1
2
3
4
5
6
7
8
<?
echo '<?xml version="1.0" standalone="yes"?>';

function zooiCode ()
{
    echo 'blaat';
}
?>

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
Hacku schreef op maandag 22 januari 2007 @ 21:44:
Kickje, hoort dit zo ?

PHP:
1
2
3
4
5
6
echo '<?xml version="1.0" standalone="yes"?>';

function zooiCode ()
{
    echo 'blaat';
}
Ja, in principe wel. short_open_tag is default enabled in PHP. Vergelijk het met:
PHP:
1
<h1><? echo 'titel'; ?></h1>

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Duidelijk :) Next time plaats ik de tags wel aan het begin en einde.

March of the Eagles


  • t-x-m
  • Registratie: November 2003
  • Laatst online: 24-08 11:21

t-x-m

.NET Nerd

Volgens mij een bugje gevonden in de highlighter, in onderstaand voorbeeld zie je dat de link de rode fout-correctie onderlijning krijgt?:
HTML:
1
2
3
4
5
<html>
  <body>
    <a href="./file.php?id=1&string=abc">asdfg</a>
  </body>
</html>

Gevonden in dit topic

GC.Collect();


  • user109731
  • Registratie: Maart 2004
  • Niet online
Het moet dan ook zo:
HTML:
1
<a href="./file.php?id=1&amp;string=abc">asdfg</a>


Geen bug dus afaik :)

[ Voor 9% gewijzigd door user109731 op 16-02-2007 16:06 ]


  • JayVee
  • Registratie: Mei 2002
  • Laatst online: 14-11 21:30

JayVee

shibby++!

t-x-m schreef op vrijdag 16 februari 2007 @ 15:59:
Volgens mij een bugje gevonden in de highlighter, in onderstaand voorbeeld zie je dat de link de rode fout-correctie onderlijning krijgt?:
HTML:
1
2
3
4
5
<html>
  <body>
    <a href="./file.php?id=1&string=abc">asdfg</a>
  </body>
</html>

Gevonden in dit topic
Fout zit in jouw de HTML! Het moet zijn
HTML:
1
<a href="./file.php?id=1&amp;string=abc">asdfg</a>

ASCII stupid question, get a stupid ANSI!


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Een href is een URI en die mag weldegelijk een & teken bevatten.
pchar = uchar | ":" | "@" | "&" | "="

  • André
  • Registratie: Maart 2002
  • Laatst online: 19-11 11:08

André

Analytics dude

Rowanov schreef op vrijdag 16 februari 2007 @ 21:23:
Een href is een URI en die mag weldegelijk een & teken bevatten.

[...]
Natuurlijk mag een url die bevatten, alleen in de code ver-entity je hem ;)

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Topicstarter
idd, HTML-attributen dienen HTML-encoded te zijn. 'string' is geen bestaande entity - check je voorbeeld maar eens in de validator ;)

Intentionally left blank


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Hmz, daar heb ik nooit over nagedacht. :)
Pagina: 1