Snippet Zone

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:

```
.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 😛

September 28, 2021

// css // dom // javascript // meta // strings // ui

console.log Hijack

```
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);
```

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…

August 30, 2021

// css // hacks // javascript // meta // strings // tricks // ui

Snippet Zone Code Highlighter

console.log Hijack

Recent

Archive