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

Mini-Markdown Alternate Version

```
const tagRules = {
```
```
  b: '\\*\\*',
```
```
  i: '_',
```
```
  strike: '~~',
```
```
  code: '`'
```
```
};
```
```
tagRules.keys = Object.keys(tagRules);
```
```
 
```

const toTag = (str, delim, tag) => str.replace(

```
  new RegExp(
```

    `${delim}(.+)${delim}`, 'gm'),`<${tag}>$1</${tag}>`)

```
 
```
```
const makeTags = str => 
```

  tagRules.keys.reduce((accum, val, i) =>

    toTag(accum, tagRules[val], val), str)

```
 
```
```
const markConfig = { 
```
```
  emptyLine: {
```
```
    check: val => val.trim() === '',
```
```
    process: () => '<br>'
```
```
  },
```
```
  header: {
```

    calc: val => val.split`#`.length - 1,

```
    check: (val, result) => result > 0,
```

    process: (val, result) => `<h${result} style="margin-bottom:0">

      ${val.replace(/#/g, '')}</h${result}>`

```
  },
```
```
  hr: {
```
```
    check: val => val.trim() === '***',
```
```
    process: () => '<hr>'
```
```
  },
```
```
  li: {
```

    check: val => val.startsWith('- '),

    process: (val, result, lastMethod) => {

      const open = lastMethod != 'li' ? '<ul>' : '';

```
      return `${open}<li>${val}</li>`;
```
```
    }
```
```
  }
```
```
};
```
```
 
```

markConfig.keys = Object.keys(markConfig);

```
markConfig.tail = {
```

  process: (val, result, lastMethod) => {

    const close = lastMethod == 'li' ? '</ul>' : '';

```
    return val + close;
```
```
  }
```
```
};
```
```
 
```
```
const mark = str => {
```
```
  const lines = str.split`\n`;
```
```
  let lastMethod;
```

  const newStr = lines.map((line, i) => {

    const method = markConfig.keys.find(key => {

      const { calc = () => {}, check } = markConfig[key];

```
      return check(line, calc(line))
```
```
    }) || 'tail'
```
```
 
```

    const { calc = () => {} } = markConfig[method];

    const newLine = markConfig[method].process(line, calc(line), lastMethod);

```
    lastMethod = method;
```
```
    return newLine;
```
```
  })
```
```
  return newStr.join`\n`;
```
```
}
```
```
 
```
```
// try it out
```
```
 
```

const md = document.body.appendChild(document.createElement('div'));

```
md.style.fontFamily = 'sans-serif';
```
```
md.innerHTML = `# Mini Markdown Subset
```
```
 
```
```
This is a subset of markdown stuff
```
```
 
```
```
## It includes
```
```
 
```
```
- headers
```
```
- **bold styles**
```

- _italic styles, <br> multiline fine..._

```
- \`code style\`
```
```
 
```

Other than ~~strikethrough~~ that is pretty much it... oh and **hr** tags

```
***
```
```
***
```

_here is some italic text with some bold text **nested** <br>within it etc..._

```
`;
```

md.innerHTML = makeTags(mark(md.innerHTML));

This is another version of a post from awhile back. I was curious about readability. This has no for loops and no if statements. Personally I find it less readable than the other version…

Here is the simpler original version for comparison… this one also has nested list support.

  const isLi = val => val.match(/(^\s+)?- /)

```
 
```
```
  function mark(str) {
```
```
    const lines = str.split`\n`;
```
```
    let wasLi = false
```
```
    let lastDepth = 0;
```
```
    let depth;
```
```
 
```

  for (let i = 0; i < lines.length; i++) {

```
    let curr = lines[i];
```
```
    const line = curr.trim();
```

    const hdr = line.split`#`.length - 1;

```
 
```
```
    if (line === '') {
```
```
      lines[i] = '<br>';
```
```
    } else if (hdr > 0) {
```

      lines[i] = `<h${hdr} style="margin-bottom:0">

        ${curr.replace(/#/g, '')}</h${hdr}>`;

```
    } else if (line === '***') {
```
```
      lines[i] = '<hr>';
```
```
    } else if (isLi(curr)) {
```

      depth = curr.split('-')[0].length + 1;

```
 
```
```
      lines[i] = '';
```
```
      if (depth < lastDepth) {
```

        const diff = (lastDepth - depth) / 2

```
 
```

        lines[i] += '</ul>'.repeat(diff);

```
        lastDepth = depth 
```
```
      }
```
```
 
```

      lines[i] += `${depth > lastDepth ? '<ul>' : ''}

        <li>${curr.replace(/-\s+/, '')}</li>`;

```
 
```
```
      lastDepth = depth;
```
```
 
```
```
      wasLi = true;
```
```
    } else if (wasLi) {
```

      lines[i - 1] = '</ul>\n'.repeat(lastDepth)

```
      wasLi = false
```
```
    }
```
```
  }
```
```
 
```
```
  return lines.join`\n`
```

    .replace(/\*\*(.+)\*\*/gm, '<b>$1</b>')

```
    .replace(/_(.+)_/gm, '<i>$1</i>')
```

    .replace(/~~(.+)~~/gm, '<strike>$1</strike>')

    .replace(/`(.+)`/gm, '<code>$1</code>');

```
}
```
```
 
```
```
// try it out
```
```
 
```

const md = document.body.appendChild(document.createElement('div'));

```
md.style.fontFamily = 'sans-serif';
```
```
md.innerHTML = `
```
```
#Snippet Zone
```
```
 
```

This snippet renders a subset of markdown.

```
 
```
```
- **bold** and _italic text_
```
```
- lists 
```
```
  - this particulate
```
```
    - snippet can render 
```
```
    - nested
```
```
  - lists
```
```
 
```
```
- _**~~strikethrough text~~**_
```
```
 
```

In a real project you will probably want to use

something more complete like the great <a href="https://github.com/markedjs/marked" target="blank" rel="noopener">marked.js</a> library.

```
`;
```
```
md.innerHTML = mark(md.innerHTML);
```

September 27, 2021

// javascript // markdown // strings

ASCII Circles (Bresenham Fun)

```
// some circles made of text
```
```
 
```
```
const cols = 50;
```
```
const rows = 50;
```
```
const sym = '.';
```
```
const body = document.body;
```
```
 
```
```
Object.assign(body.style, {
```
```
  userSelect: 'none',
```
```
  fontFamily: 'Courier, monospace',
```
```
  position: 'fixed', 
```
```
  width: '100%',
```
```
  height: '100%',
```
```
  margin: 0
```
```
});
```
```
 
```
```
const el = body.appendChild(
```
```
  document.createElement('span')
```
```
);
```
```
el.innerHTML = sym;
```
```
 
```
```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  left: '50%',
```
```
  top: '50%',
```
```
  wordWrap: 'break-word',
```
```
  cursor: 'pointer'
```
```
});
```
```
 
```

const charSize = el.getBoundingClientRect().width;

```
const elWidth = charSize * cols;
```
```
el.style.display = 'block'
```
```
el.style.width = `${elWidth}px`;
```
```
 
```
```
const info = body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
Object.assign(info.style, {
```
```
  background: '#fff',
```
```
  padding: '4px',
```
```
  position: 'absolute'
```
```
})
```

info.innerHTML = 'click/tap and hold for different fx';

```
 
```
```
function resize() {
```
```
  const scl = Math.min(
```
```
    1.23, 
```

    Math.min(innerWidth, innerHeight) / elWidth * .93

```
  );
```

  el.style.transform = `translate(-50%, -50%) scale(${scl}, ${scl * .55})`

```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const size = cols * rows;
```
```
const pix = sym.repeat(size);
```
```
el.innerHTML = pix;
```
```
 
```
```
let cells = pix.split('')
```
```
const blank = cells.concat();
```
```
 
```
```
function setSym(x, y, col) {
```
```
  const idx = x + y * cols;
```
```
  if (cells[idx] != null) {
```
```
    cells[idx] = col;
```
```
  }
```
```
  return setSym
```
```
}
```
```
 
```
```
const grad = '::;|0UU888NN';
```
```
function circ(shooter) {
```

  let x = Math.round(Math.random() * cols);

  let y = Math.round(Math.random() * rows);

```
  const rad = Math.round(
```
```
    shooter ? Math.random() * 2 :
```

      Math.random() * Math.random() * 13 + 1

```
  );
```
```
 
```

  const sym = shooter ? '#' : grad.charAt(rad % grad.length);

```
  let speed = rad / 10 + .1;
```
```
  let dir = Math.random() * 2 - 1;
```
```
  return () => {
```

    drawCircle(x, y, rad, sym, shooter);

```
    y += speed;
```
```
    if (shooter) x += speed * 3 * dir;
```
```
    if (y > rows + 10) y = -14;
```
```
  }
```
```
}
```
```
 
```
```
const circs = [];
```
```
const NUM = 40;
```
```
for (let i = 0; i < NUM; i++) {
```
```
  circs.push(circ(Math.random() > 0.5))
```
```
}
```
```
 
```
```
let down;
```

document.addEventListener('mousedown', () => {

```
  down = true;
```
```
});
```

document.addEventListener('mouseup', () => {

```
  down = false;
```
```
});
```

document.addEventListener('touchstart', () => {

```
  down = true;
```
```
});
```

document.addEventListener('touchend', () => {

```
  down = false;
```
```
});
```
```
 
```
```
let tweak;
```
```
let tweakChoice;
```
```
let tweakChance = 0.4;
```

const clear = () => cells = blank.concat();

```
 
```
```
function draw() {
```
```
  if (!down) {
```
```
    tweak = false;
```
```
    tweakChoice = Math.random();
```
```
    clear();
```
```
  } else {
```
```
    if (tweakChoice < tweakChance) {
```
```
      tweak = true;
```
```
      clear();
```
```
    }
```
```
  }
```
```
 
```
```
  circs.forEach(circ => circ());
```
```
  el.innerHTML = cells.join('');
```
```
}
```
```
 
```

// 60fps is too fast, so use 30ms interval

```
setInterval(draw, 30);
```
```
 
```
```
function hLine(xp, yp, w, col) {
```
```
  for (let i = 0; i < w; i++) {
```
```
    setSym(xp + i, yp, col);
```
```
  }
```
```
  return hLine;
```
```
}
```
```
 
```
```
// bresenham circle
```

function drawCircle(xp, yp, radius, sym = '@', isFilled) {

```
  if (isFilled && tweak) sym = '';
```
```
 
```
```
  xp = parseInt(xp, 10);
```
```
  yp = parseInt(yp, 10);
```
```
  radius = parseInt(radius, 10);
```
```
  let balance = -radius,
```
```
    xoff = 0,
```
```
    yoff = radius;
```
```
 
```
```
  while (xoff <= yoff) {
```
```
    const p0 = xp - xoff;
```
```
    const p1 = xp + xoff;
```
```
 
```
```
    const p2 = yp + yoff;
```
```
    const p3 = yp - yoff;
```
```
    const p4 = yp + xoff;
```
```
    const p5 = xp + yoff;
```
```
    const p6 = xp - yoff;
```
```
    const p7 = yp - xoff;
```
```
 
```
```
    if (isFilled) {
```
```
      const w0 = xoff + xoff;
```
```
      const w1 = yoff + yoff;
```
```
 
```
```
      hLine
```
```
        (p0, yp + yoff, w0, sym)
```
```
        (p0, yp - yoff, w0, sym)
```
```
        (p6, yp + xoff, w1, sym)
```
```
        (p6, yp - xoff, w1, sym);
```
```
 
```
```
    } else {
```
```
      setSym
```
```
        (p1, p2, sym)
```
```
        (p0, p2, sym)
```
```
        (p0, p3, sym)
```
```
        (p1, p3, sym)
```
```
        (p5, p4, sym)
```
```
        (p6, p4, sym)
```
```
        (p6, p7, sym)
```
```
        (p5, p7, sym);
```
```
    }
```
```
 
```

    // never been able to find the original

```
    // source for the below condition 
```

    // more info here: https://actionsnippet.com/?p=492

    if ((balance += xoff++ + xoff) >= 0) {

```
      balance -= --yoff + yoff;
```
```
    }
```
```
  }
```
```
}
```

This is a bit of a longer snippet that uses the Bresenham circle drawing algorithm to draw some circles with text. I recommend looking at it with the fullscreen button.

I like to do this:

```
hLine
```
```
  (p0, yp + yoff, w0, sym)
```
```
  (p0, yp - yoff, w0, sym)
```
```
  (p6, yp + xoff, w1, sym)
```
```
  (p6, yp - xoff, w1, sym);
```

Make a function return itself, so that if you need to call it many times without having to repeat the function name. Because this isn’t a common style it is generally frowned upon, I’m always tempted to use it at work for some reason… maybe next April fools.

September 26, 2021

// animation // arrays // graphics // hacks // humor // javascript // math // random // strings // tricks

30% Chance Math.random()

```
// 30%
```
```
if (Math.random() < .3) {
```
```
  // 30% chance this will run
```
```
  console.log('30%');
```
```
} else {
```
```
  console.log('nope');
```
```
}
```

I do this all the time when creative coding. I usually use a seeded random number generator instead of Math.random. It’s very useful to have something happen X% of the time.

Let’s run this a few times and look at the results. Click/tap try it out.

```
for (let i = 0; i < 111; i++) {
```
```
  if (Math.random() < .3) {
```
```
    console.log('30%');
```
```
  } else {
```
```
    console.log('nope');
```
```
  }
```
```
}
```

Scroll through the results of the console window.

September 25, 2021

// javascript // math // random // tricks

Cistercian Numerals (semi-golfed)

```
N = -1
```
```
S = 30
```
```
H = 90
```
```
h = 45
```
```
d = document
```
```
b = d.body
```
```
m = _ => d.createElement(_)
```
```
a = _ => b.appendChild(_)
```
```
 
```
```
with(a(
```
```
    Object.assign(
```
```
      m`canvas`,
```
```
      { width: 80, height: 120 }
```
```
    )
```
```
  ).getContext`2d`
```
```
) { 
```
```
  a(m`br`)
```
```
 
```
```
  L = (a, b, C, d) => {
```
```
    moveTo(a, b)
```
```
    lineTo(C, d)
```
```
  }
```
```
 
```
```
  M = _ => L(0, 0, 0, H)
```
```
  O = _ => L(0, 0, S, 0)
```
```
  W = _ => L(0, S, S, S)
```
```
  T = _ => L(0, 0, S, S)
```
```
  F = _ => L(0, S, S, 0)
```
```
  X = _ => L(S, 0, S, S)
```
```
 
```
```
  D = [
```
```
    _ => {},
```
```
    O, W, T, F, 
```
```
    [O,F],
```
```
    X,
```
```
    [O,X],
```
```
    [W,X],
```
```
    [O,W,X]
```
```
  ]
```
```
 
```
```
  n = s => {
```
```
    [...s].reverse().map((l, i) => {
```
```
      save()
```
```
      translate(S+9, h+9)
```
```
      scale(N**i, N**~~(i/2))
```
```
      translate(0, -h)
```

      M() ;[D[l]].flat().map(x => x && x())

```
      restore()
```
```
    })
```
```
  }
```
```
 
```
```
  a(m`input`).oninput = e => {
```
```
    clearRect(0, 0, 80, 120)
```
```
    beginPath()
```
```
    n(~~e.target.value+'')
```
```
    stroke()
```
```
  }
```
```
}
```

Type any number from 0-9999 into the input field and see the corresponding Cistercian Numeral. This snippet is partially golfed, I left the canvas commands intact to make things a bit easier to understand.

Simpler SVG Version

This one hardcodes all numbers 0-9 as paths, unlike the canvas version which only defines 1,2,3,4 and 6 as paths and then combines them to create 5,7,8 and 9.

```
h='innerHTML'
```
```
C='children'
```
```
 
```
```
document.body[h]=`
```

<svg id=G width=99 viewBox="0 0 80 120"

  style="stroke:black;fill:none;overflow:visible">

```
  <g transform="translate(30,2)">
```
```
    <path d="M0 0L 30 0"/>
```
```
    <path d="M0 30L 30 30"/>
```
```
    <path d="M0 0L 30 30"/>
```
```
    <path d="M0 30L30 0"/>
```
```
    <path d="M0 30L30 0 0 0"/>
```
```
    <path d="M30 0L30 30"/>
```
```
    <path d="M30 30L30 0 0 0"/>
```
```
    <path d="M0 30L30 30 30 0"/>
```
```
    <path d="M0 30L30 30 30 0 0 0"/>
```
```
  </g>
```

  <g transform=translate(30,2)scale(-1,1)></g>

  <g transform=translate(30,92)scale(1,-1)></g>

  <g transform=translate(30,92)scale(-1,-1)></g>

```
  <path id=m d="M 30 2 L 30 92"/>
```
```
</svg>
```

<style>path:not(#m){opacity:0}</style><br>

```
<input id=I>`
```
```
 
```
```
c=G[C]
```
```
p=c[0][h] 
```
```
 
```
```
n = s => 
```
```
  [...s].reverse().map((l, i) => 
```

   l-1>-1 && (c[i][C][l-1].style.opacity=1))

```
 
```
```
I.oninput = e => {
```
```
  for(i=0;i<4;i++)c[i][h]=p
```
```
  n(~~e.target.value+'')
```
```
}
```

September 24, 2021

// arrays // canvas // codegolf // graphics // hacks // javascript // math

Older Posts

Newer Posts