BBCode syntax highlighting

uʍop ǝpısdn

18. desember 2011

Siden jeg har hatt så mye jeg egentlig skulle ha gjort i det siste har jeg snekret sammen en liten app for å få syntax highlighting på språk som ikke støttes på dette eller andre fora.
Den støtter ikke allverdens språk nå (i all hovedsak javascript som utviklingsmodell), men det er relativt lett å støtte nye språk.

Eksempelkode:

Kode

[COLOR=Olivedrab]//[/COLOR][COLOR=Olivedrab]kommentarlnje[/COLOR]
[COLOR=black]var[/COLOR] [COLOR=Steelblue]a[/COLOR] [COLOR=black]=[/COLOR] [COLOR=Steelblue]1[/COLOR];

[COLOR=Olivedrab]/*[/COLOR][COLOR=Olivedrab]
 * kommentar med hyperlenke
 * http://www.freak.no
 [/COLOR][COLOR=Olivedrab]*/[/COLOR]

[COLOR=black]if[/COLOR] [COLOR=Darkorange]([/COLOR][COLOR=Steelblue]a[/COLOR] [COLOR=black]==[/COLOR] [COLOR=Steelblue]1[/COLOR][COLOR=Darkorange])[/COLOR]
[COLOR=Darkorange]{[/COLOR]
    [COLOR=black]alert[/COLOR][COLOR=Darkorange]([/COLOR][COLOR=Darkslategray]'[/COLOR][COLOR=Darkslategray]woho[/COLOR][COLOR=Darkslategray]'[/COLOR][COLOR=Darkorange])[/COLOR];
[COLOR=Darkorange]}[/COLOR]

Se en ikke helt ferdig utgave her

Den støtter også POST GET via lang og code.

GET demonstrasjon

Jeg ser for meg at bookmarklets som henter ut CODE-blokker fra textarea ved en ny post er en grei løsning for å automatisere litt. Dog er jeg litt usikker på en god faktisk implementasjon av dette.

Støttede språk: js, html, css, xml
Javascript kjøres automagisk gjennom en beutifier.

Fargene og stilene på highlight forøvrig er ikke ferdig, og ser ganske grotesk ut. Dette er WIP og utvilkler etterhvert som jeg har tid.

Om noen skulle ha interesse av kildekode er det bare å rope ut. Det bærer litt preg av et lappeteppe atm

Dette er bare noe jeg har lekt meg litt med, så det er litt så som så, men om noe skulle vise seg at noen faktisk tror det har potensiale til å bli brukt er det kanskje mulig å legge ned litt bedre arbeid.

Sist endret av z0p; 18. desember 2011 kl. 01:17.

Vikingor

<?=getUserTitle()?>

319 52

18. desember 2011

Kildekoden takk?

z0p

uʍop ǝpısdn

Trådstarter

3.814 906

18. desember 2011

Har brukt et lite sammensurium av eksisterende skript. bl.a.

Javascript beutifier
JavaScript Syntax Highlighting Engine
zeroclipboard
BBCode editor

Kildekode
Men ikke forvent struktur

Gikk litt fort i svingene for å få sammen noe som virket

onClipEvent

2.147 999

18. desember 2011

Ser bra ut!

* Test *

Kode

 [COLOR=black]<[/COLOR] [COLOR=Steelblue]script[/COLOR] [COLOR=Steelblue]type[/COLOR] [COLOR=black]=[/COLOR] [COLOR=Darkslategray]"[/COLOR][COLOR=Darkslategray]text/javascript[/COLOR][COLOR=Darkslategray]"[/COLOR] [COLOR=black]>[/COLOR]
 [COLOR=Olivedrab]//[/COLOR][COLOR=Olivedrab]Write a "Good morning" greeting if[/COLOR]
 [COLOR=Olivedrab]//[/COLOR][COLOR=Olivedrab]the time is less than 10[/COLOR]
 [COLOR=black]var[/COLOR] [COLOR=Steelblue]d[/COLOR] [COLOR=black]=[/COLOR] [COLOR=black]new[/COLOR] [COLOR=black]Date[/COLOR][COLOR=Darkorange]([/COLOR][COLOR=Darkorange])[/COLOR];
 [COLOR=black]var[/COLOR] [COLOR=Steelblue]time[/COLOR] [COLOR=black]=[/COLOR] [COLOR=Steelblue]d[/COLOR].[COLOR=Steelblue]getHours[/COLOR][COLOR=Darkorange]([/COLOR][COLOR=Darkorange])[/COLOR];

 [COLOR=black]if[/COLOR] [COLOR=Darkorange]([/COLOR][COLOR=Steelblue]time[/COLOR] [COLOR=black]<[/COLOR] [COLOR=Steelblue]10[/COLOR][COLOR=Darkorange])[/COLOR]
 [COLOR=Darkorange]{[/COLOR]
     [COLOR=black]document[/COLOR].[COLOR=Steelblue]write[/COLOR][COLOR=Darkorange]([/COLOR][COLOR=Darkslategray]"[/COLOR][COLOR=Darkslategray]<b>Good morning</b>[/COLOR][COLOR=Darkslategray]"[/COLOR][COLOR=Darkorange])[/COLOR];
 [COLOR=Darkorange]}[/COLOR] [COLOR=black]<[/COLOR] [COLOR=black]/[/COLOR][COLOR=Steelblue]script[/COLOR][COLOR=black]>[/COLOR]

Sist endret av onClipEvent; 18. desember 2011 kl. 01:34.

z0p

uʍop ǝpısdn

Trådstarter

3.814 906

18. desember 2011

Den fungerer greit nok for å demonstrere, og se om det er interesse for dette. Jeg vet ikke om jeg kommer til å bruke noe slikt selv engang, så jeg lufter det her. Bugreports vil være mer enn overflødig på dette stadiet

steili

1. d4

1.745 518

19. desember 2011

Dette ser strålende ut! En fremtidig feature kunne kanskje vært å konvertere kode fra pastebin og andre lignende nettsteder. (type tast inn nettadresse og trykk konverter)

z0p

uʍop ǝpısdn

Trådstarter

3.814 906

20. desember 2011

Dersom du skriver en pastebin url i input-feltet vil den nå hente kode fra pastebin.
Implementerte dette siden det ga en rask måte å teste på. Men siden det går via et ekstra request til serveren er det ikke en feature jeg vil prioritere siden det vil oppstå cross-domain komplikasjoner ved en rekke bruksområder.
De færreste gidder nok å åpne en ny side for å genere bbcode før de poster. Dersom man kan bruke en bookmarklet som kan lete opp code-blokker i innlegget man holder på å forfatte gjør det prosessen litt lettere.

En utfordring nå er at det som det postes mye av på forum er en salig blanding av php, html, css og javascript. Da trengs det en multi-highlighter.

▼ ... over et år senere ... ▼

steili

1. d4

1.745 518

23. oktober 2013

Finnes denne tjenesten fortsatt? Jeg kunne gjerne tenkt meg en slik tjeneste for Python, men jeg har ikke klart å finne noen foreløpig.

▼ ... noen uker senere ... ▼

z0p

uʍop ǝpısdn

Trådstarter

3.814 906

13. november 2013

Jeg har nok en backup et sted, om det skulle være interessant. Men det er foreløpig mer konsept kode, enn noe som fungerer...