Snippet Zone Code Highlighter I wrote a naive syntax highlighter a few weeks ago. Here it is rendering the code for itself.
:
This is not a perfect highlighter, but it was fun to create and I will definitely use it in the Snippet Zone Github repository once I get that set up.
There is some css that goes with the highlighter, it’s pretty boring, but here it is anyway:
copy .hh { white- space: pre- wrap; font- family: monaco, monospace; line- height: 1.5 ; font- size: .8em; background: rgb( 3 , 21 , 36 ) ; color: rgba( 156 , 221 , 254 , 1 ) ; padding: 1em; } .hh b { font- weight: normal; } .hh i { color: #1ad6ae; } .hh u { color: rgb( 255 , 195 , 252 ) ; text- decoration: none; } .num { color: #b5cea8; } .str , .str b { color: #ce9178; } .par { color: white; font- weight: bold; } .brk { color: white; font- weight: bold; } .o { color: rgb( 0 , 151 , 221 ) ; } .obj { color: rgb( 52 , 206 , 47 ) ; font- weight: bold ! important; } .w { color: #1ad6ae; font- style: italic; } .k { color: aqua; } .cmt { color: gray ! important; } .cmt b { color: gray ! important; }
I have no idea why I used such bad class names there 😛
console.log Hijack
copy const log = console.log ; const consoleUI = document.body .appendChild ( document.createElement ( 'div' ) ) ; document.body .style .margin = 0 ; Object .assign ( consoleUI.style , { position: 'fixed' , bottom: 0 , width: '100%' , height: '30%' , maxHeight: '450px' , minHeight: '200px' , background: 'rgb(68, 68, 81)' , overflow: 'scroll' } ) ; function consoleRow( str) { const row = document.createElement ( 'div' ) ; consoleUI.prepend ( row) ; row.innerText = str; Object .assign ( row.style , { padding: '.5em' , fontFamily: 'sans-serif' , color: 'white' , borderBottom: '1px solid rgba(255, 255, 255, .1)' , whiteSpace: 'pre-wrap' } ) ; } console.log = ( ...args ) => { const formatted = args.map ( val => { return typeof val === 'object' ? JSON.stringify ( val, null , 2 ) : val; } ) ; consoleRow( formatted.join ( ' ' ) ) ; log.apply ( console, args) ; } ; // test it out console.log ( 1 , 2 , 3 , 4 ) ; console.log ( new Date ( ) ) ; const someObject = { test: 123 , testing: { x: 1 , y: 2 , z: 3 } } ; console.log ( someObject) ; console.log ( 3 , 2 , 1 , 0 ) ;
Try it out…
I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…