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

Snippet Zone Code Highlighter

Recent

Archive