Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

feedback code highlighting

bewerkt vr 1 jan 2016 in Algemeen Posts: 879
ik heb de meest gebruikte scriptjes even gehighlight met de GooglePrettify en die zien er nu zo uit:
http://develop3.webprofis.nl/discussion/460/test-code-block?new=1

Is deze highlighting acceptabel?
GooglePrettify maakt in principe geen onderscheid tussen languages tenzij je nadrukkelijk een language prioriteit geeft. Maar die instelling gebruik ik niet.
Persoonlijk is een voordeel hiervan als je gemengde code hebt (HTML, CSS en bv PHP) in 1 code block, je alles in ieder geval gehighlight krijgt. Nadeel om niet per language te werken, is dat de highlighting niet zo genuanceerd is. Dit zie je bv bij het CSS block; als je inspect regel 6 color: #333333; dan zie je dat de #333333 in de classe com staat, wat dus eigenlijk commentaar is. Maar in Perl wordt een commentaar regel begonnen met het # teken. Het wordt dus gezien als commentaar omdat hij geen onderscheid maakt tussen de languages.

Enfin; Wat is jullie mening? Is dit acceptabel zoals het nu uitziet? De kleuren kunnen altijd nog aangepast worden maar of ie iets als een plain, keyword, string of iets anders ziet, daar heb ik geen invloed op
«13

Reacties

  • Ik vind het beter, voornamelijk omdat je ook een echte mix kunt dumpen en de highlighting redelijk cool blijft!
  • PMPosts: 879
    Nu je dat zo zegt, ik heb natuurlijk wel nog altijd de optie om alle specifieke talen erin te zetten; dwz je klikt op het code block en je krijgt een optie om een taal te kiezen of je kiest geen specifieke taal en je klikt bv optie "general" aan als je een mix wilt in een block. Zal eens kijken wat die dan met de highlighting doet...laat nog wat weten
  • bewerkt za 2 jan 2016
    PMPosts: 879
    heb de kleuren wat aangepast; weet niet of het beter is zo, Voor mijn gevoel heb ik wel alles beter geaccentueerd
    Wat mij opvalt is dat een CSS block only anders uitziet dan als het samen met andere code in een block staat: http://develop3.webprofis.nl/discussion/comment/2482/#Comment_2482
    Vgl met hier de3 css regels: http://develop3.webprofis.nl/discussion/comment/2498/#Comment_2498
    In het css block only (http://develop3.webprofis.nl/discussion/comment/2482/#Comment_2482) zie je ook op regel 6 dat als er geen spatie tussen : en # staat het NIET als commentaar wordt gezien, wat dus in regel 7 wel het geval is
    Maaruh...is dit beter zo die kleuren? Of is het allemaal wat te bont?

  • Ik zou gewoon de kleuren overnemen van notepad++
    Volgens mij gebruikt 70% van de wereld dat om te scripten?
  • bewerkt za 2 jan 2016
    PMPosts: 879
    Dan moet je me even helpen als je tijd en zin hebt; ik gebruik zelf Komodo editor en weet niet welke kleuren notepad ++ genereert.
    Als we uitgaan van deze codeblocks : http://develop3.webprofis.nl/discussion/comment/2482/#Comment_2482
    Dit zijn de classes waarop Prettify triggert met de kleuren:

    @media screen {
    /* string content */
    .str {
    color: #D6070F;
    }

    /* a keyword */
    .kwd {
    color: #0AA2DE;
    }

    /* a comment */
    .com {
    color: #9c9491;
    font-style: italic;
    }

    /* a type name */
    .typ {
    color: #AD771D;
    }

    /* a literal value */
    .lit {
    color: #df5320;
    }

    /* punctuation */
    .pun {
    color: #393;
    }

    /* lisp open bracket */
    .opn {
    color: #1b1918;
    }

    /* lisp close bracket */
    .clo {
    color: #1b1918;
    }

    /* a markup tag name */
    .tag {
    color: #000;
    }

    /* a markup attribute name */
    .atn {
    color: #8A26F5;
    }

    /* a markup attribute value */
    .atv {
    color: #F78F21;
    }

    /* a declaration */
    .dec {
    color: #8AC305;
    }

    /* a variable name */
    .var {
    color: #f22c40;
    }

    /* a function name */
    .fun {
    color: #407ee7;
    }
    }

    zou je me de nieuwe kleurcodes per classe kunnen geven zoals Notepad++ die hanteert?
    Dus ff in de inspector kijken welke classe er bij staat en dan welke kleur notepad++ er aan geeft


    Update:
    Ohja; het maakt niets uit als ik de language per codeblock erbij zet of niet, hij maakt toch dezelfde kleuren voor html, php, js, css etc... Ik dacht als de language erbij staat dat ie een ander kleurpatroon gaf maar dat is niet zo
    Ik heb hier mee vergeleken: http://jmblog.github.io/color-themes-for-google-code-prettify/atelier-forest-light/ die wel per block de language geven. Alleen bij het css block levert dat verschil op. Maar als ik prioriteit aan css geef vat de rest weer anders uit
  • Ik zal kijken wat er bij mij gebruikt wordt, nadeel alleen is dat de highligting gebeurd n.a.v filetype.
    En aangezien ik 99% van de tijd in php files werk .. :D
    nuet
  • PMPosts: 732
    Als je notepad++ installeert dan is er een xml file met de naam styles.model.xml hier staan allee kleuren in vermeld.
    Maar het zijn er genoeg ;)

    Zou wel heel handig zijn, want denk dat zoals vinTage al vermeld de meeste met notepad++ werkt.
    Zelf zou ik niet zonder kunnen, met mijn tik fouten :)
    If it's not fun, you're not doing it right!
  • bewerkt za 2 jan 2016
    PMPosts: 415
    Het heeft even geduurd, want het was niet zo simpel :P
    Inderdaad in die xml staan de kleuren, maar die zijn onderverdeeld in 850 regels ofzo, en behalve de comment en een string, staan de gevraagde identefiers niet in het php stukje :P

    Ik heb dus ook prettify gedownload en een beetje aan het klooien gegaan om een leesbaar resultaat over te houden.
    Ik kwam op het volgende uit wat ik acceptabel vond, maar heeft wel een nadeel, en dat is onder anderen #kleur ook als comment wordt gezien. (zoals in htaccess bv)
    Verder wist ik niet waneer .fun aangeroepen werd, dus heb ik die maar even orange meegegeven (om hem te vinden), maar dat zou hoogstwaarschijnlijk beter zwart worden of mss blauw.

    .str { color: #808080 } /* string content */
    .kwd { color: #0000FF } /* a keyword */
    .com { color: #008000 } /* a comment */
    .typ { color: #000 } /* a type name */ /*vage shizzle zoals DXImageTransform.Microsoft en GradientType*/
    .lit { color: #000 } /* a literal value */
    /* punctuation, lisp open bracket, lisp close bracket */
    .pun, .opn, .clo { color: purple }
    .tag { color: #0000FF } /* a markup tag name */
    .atn { color: red } /* a markup attribute name */
    .atv { color: purple } /* a markup attribute value */
    .dec, .var { color: #000 } /* a declaration; a variable name */
    .fun { color: orange } /* a function name */
    nuet
  • nuet schreef:: Update:
    Ohja; het maakt niets uit als ik de language per codeblock erbij zet of niet, hij maakt toch dezelfde kleuren voor html, php, js, css etc... Ik dacht als de language erbij staat dat ie een ander kleurpatroon gaf maar dat is niet zo
    Ik heb hier mee vergeleken: http://jmblog.github.io/color-themes-for-google-code-prettify/atelier-forest-light/ die wel per block de language geven. Alleen bij het css block levert dat verschil op. Maar als ik prioriteit aan css geef vat de rest weer anders uit
    Dat is ook zo en werkt wel, MAAR je moet daar de bijhorende js files voor maken, in de map ->src vind je ook alleen een css js en voor de andere door jouw genoemde files niet ;-)
  • PMPosts: 879
    Dan is dit het resultaat: http://develop3.webprofis.nl/discussion/460/test-code-block
    Voor mijn gevoel oogt dit rustiger maar de str springt er niet echt uit met zijn lichtgrijs.
    zit ff e denken: of de achergrond wat donkerder maken zodat contrast ber is of toch een ander kleurtje aan de str? Dan de lit, moet die ook niet een meer accentkleurtje krijgen? En het typ misschien ook anders dan zwart?
    vinTage schreef:: Dat is ook zo en werkt wel, MAAR je moet daar de bijhorende js files voor maken, in de map ->src vind je ook alleen een css js en voor de andere door jouw genoemde files niet
    Klopt, in de lijst van languages staat geen lang-php, lang-js, lang-(x)html

  • Er moet niets uitspringen of accenten krijgen, het moet gewoon duidelijk leesbaar zijn zonder scheel te worden van de circuskleurtjes ;-)
    Ik had bij mijn opzetje hier geen rekening gehouden met de background color van het forum, op de witte achtergrond die ik had was alles goed leesbaar.
    En eigenlijk vind ik het in het live voorbeeld op develop3 ook best te doen.
  • PMPosts: 879
    Dan blijft ie zo. Heb de achtergrondkleur iets lichter gemaakt: #f6f6f6
  • Je moet niet perse iets doen wat ik vind he, het is gewoon mijn mening :D
    Maar ik vind het best acceptabel zo!
  • bewerkt zo 3 jan 2016
    PMPosts: 879
    Ja persoonlijk zat ik te denken om die literals (nummers) toch een beetje naar voren te halen met een kleurtje. Ik heb nu de literals #C57309 en de strings #BD4343 wat net iets beter accentueerd met het zwarte plain
  • PMPosts: 879
    Een ander probleempje waar ik nu tegenaan loop zie ik als ik van geshi overspring naar Prettify is dat bij elk (oud) code block de eerste 2 regels ( list L0 en L1) leeg zijn. Zie bijv hier: http://develop3.webprofis.nl/bestelformulier. Weet ff niet hoe ik dat het beste kan oplossen zonder alles handmatig te moeten doen?
  • Staan die lege lijnen misschien in de db?
  • bewerkt di 5 jan 2016
    PMPosts: 879
    yep was ik ook al naar aan het kijken en ja daar staan de lege lijnen in:
    image
    Zou ik hier iets met dat Find and Replace tooltje kunnen doen?
    db.png
    1055 x 762 - 75K
    db.png 75.1K
  • bewerkt zo 3 jan 2016
    PMPosts: 415
    [offtopic] waarom openen die images niet in fancybox oid :p [/end]

    Jep, ik had het net al in de gaten.
    Ik deed even die post editten en daar zag ik het al.

    Ik ga nog even verder inspecten en verzinnen.

    edit, met dat tooltje kun je niets, of kan die ook databases aanpassen? :D

    edit2: waar komt die vandaan in het begin van de <pre> ?

    <b>edit3</b>, edit dit bericht :p



    edit4, maar de vraag was dus waar die <code> vandaan kwam, die geeft de editor toch niet mee?
  • PMPosts: 879
    vinTage schreef:: [offtopic] waarom openen die images niet in fancybox oid :p [/end]
    je hebt gelijk, irriteer me daar ook beetje aan; je moet terugbrowsen als je geopend hebt. ff kijken of er iets is van fancybox oid
  • bewerkt zo 3 jan 2016
    PMPosts: 415
    Er wordt toch iets ingeladen:

    <script src="/plugins/VanillaFancybox/js/jquery.fancybox.pack.js?v=1.1" type="text/javascript"></script>
    <script src="/plugins/VanillaFancybox/js/jquery.easing.pack.js?v=1.1" type="text/javascript"></script>
  • PMPosts: 879
    Ja met dat tooltje kan ik ook de databse bewerken. Althans, in de database zelf heb ik een Find and Replace tool staan en als ik een dump maak kan ik de localhost.sql bewerken en opnieuw importeren.
    Die code tag: goeie vraag! De nieuwe code blocken krijgen een code tag mee binnen de pre tag maar dat was vlg mij bij de oude niet en daar staan dus nu ook allemaal code tags tussen de pre tags? Of heb ik toevallig een stukje nieuwe code gepakt als vorbeeld? Moet ik ff checken
    vinTage
  • bewerkt zo 3 jan 2016
    PMPosts: 415
    RWAAAH, ik wordt gek van vanilla :D
    Elke keer als ik iets doe ontdek ik meer en meer bugs.

    In een quote wordt een codeblok te breed, maar zonder de code te highligten, staat er niets in de quote
    je kan geen <code> typen zonder zelf de entities in te vullen en hetzelfde voor <pre> tags
  • bewerkt ma 4 jan 2016
    PMPosts: 415
    nuet schreef:: Althans, in de database zelf heb ik een Find and Replace tool staan
    Dan gewoon

    <code>
    Dit moest dus een witte regel zijn?
    replacen met

    <code>

    edit, godver, weer een bug,,,haalt newlines weg in het eerste codeblok (edit post to see)
  • PMPosts: 879

    kijk even naar post hierboven; ge-edit

  • bewerkt ma 4 jan 2016
    PMPosts: 415
    er stonden 2 lege regels, maar inderdaad, zoiets bedoel ik.
    Let wel dat zo'n query niet super simpel gaat zijn, hij moet/mag ook \r vervangen en ????n lege regel ook.
  • bewerkt ma 4 jan 2016
    PMPosts: 879


    test (onder test zouden 2 witte regels moeten zijn en die zijn er niet)



    Hier werkt het wel: http://develop3.webprofis.nl/discussion/comment/2505/#Comment_2505
  • bewerkt ma 4 jan 2016
    PMPosts: 415
    eigenlijk feitelijk ..... moeten die blokken niet veranderd worden, want misschien zijn ze moedswillig ingevoerd met lege regels.
    In het geval van dat bestellijstje zou het wel mogen, maar niet perse in alle gevallen!!

    uitleg:
    Stel iemand vraagt iets over headers allready send (een veel voorkomend php dingetje)
    Dan wil je als reaguurder een antwoord geven dat bijvoorbeeld een lege regel dit al kan veroorzaken en dit tonen met een code.



    <?php
    //de lege regel boven de <php tag kan dit probleem al veroorzaken

    Nu weet ik niet of dit soort vragen/reacties al zijn voorgevallen, maar het is zeker iets waar je rekeningg mee moet houden!
    ALLES moet zo puur mogelijk (maar wel veilig) opgeslagen worden, en zo puur mogelijk, maar wel veilig mogelijk worden weergegeven!
    nuet
  • PMPosts: 879
    Overigens, die rode achtergrond in deze post http://webprofis.nl/discussion/comment/2576/#Comment_2576 komt omdat de code tag primair een inline code weergeeft en als ie binnen pre tags staat wordt het als een code block gezien. Ik heb die functie uitgeschakeld maar origineel is het zo dat als je inline code wilt je eerst de code tags moet plaatsen en dan de code er tussen schrijven. Plaats je eerst de hele meuk code en selecteert hem vervolgens en klikt dan op code button, dan wordt het als een code block behandeld. Hier zie je de 2 verschillen: http://vanillaforums.org/discussion/31400/googleprettify-select-all-code
  • Dat is het nadeel van werken met html tags en al HELEMAAL op een developpers forum.
    Voor zoiets gebruik je juist ubb tags.

    [code = js]
    //js code
    [/code]
Login of Registreer om te reageren.