Snippet Zone

Mini Markdown Parser

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

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

```
    const 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 (line.startsWith('- ')) {
```

      lines[i] = `${!wasLi ? '<ul>' : ''}

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

```
      wasLi = true;
```
```
    } else if (wasLi) {
```
```
      lines[i - 1] += '</ul>\n';
```
```
      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 = `# 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 = mark(md.innerHTML);
```

This code takes a string and formats a few parts of it with markdown syntax. This only handles a small subset of actual markdown.

I was thinking about markdown in code comments last night as I was working on a forthcoming snippet.zone github repo. Anyway, I decided to speed-code the main things I find myself using in markdown so that maybe I can do markdown formatted comments at some point…

August 19, 2021

// javascript // regex // strings // tricks

Random Negative or Positive

```
Math.round(Math.random()) * 2 - 1;
```

Randomly generate either -1 or 1. There are many ways to do this.

August 18, 2021

// javascript // math // tricks

Save Large Canvas

// https://stackoverflow.com/questions/38781968/problems-downloading-big-filemax-15-mb-on-google-chrome

```
function dataUriToBlob(dataURI) {
```

  const binStr = atob(dataURI.split(',')[1]);

```
  const len = binStr.length;
```
```
  const arr = new Uint8Array(len);
```

  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

```
  for (let i = 0; i < len; i++) {
```
```
    arr[i] = binStr.charCodeAt(i);
```
```
  }
```
```
 
```
```
  const blob = new Blob([arr], {
```
```
    type: mimeString
```
```
  });
```
```
 
```
```
  return URL.createObjectURL(blob);
```
```
}
```
```
 
```

const save = document.createElement('a');

```
save.innerText = 'save this big image';
```
```
document.body.appendChild(save);
```
```
 
```

const canvas = document.createElement('canvas');

```
const c = canvas.getContext('2d');
```
```
 
```
```
canvas.width = window.innerWidth * 4;
```
```
canvas.height = window.innerHeight * 4;
```
```
canvas.style.transformOrigin = '0 0';
```
```
canvas.style.transform = `scale(0.14)`;
```
```
document.body.appendChild(canvas);
```
```
 
```
```
c.fillStyle = 'black';
```

c.fillRect(0, 0, canvas.width, canvas.height);

```
 
```

const size = Math.max(window.innerWidth, window.innerHeight);

```
 
```
```
// draw some rectangles
```

c.globalCompositeOperation = 'difference'

```
for (let i = 0; i < 100; i++) {
```

  const angle = Math.random() * 180 + 180;

  const color = `hsl(${angle}deg, 50%, 50%)`;

```
  c.fillStyle = color;
```

  const width = Math.random() * size + 100;

  const height = Math.random() * size + 100;

  const x = Math.random() * canvas.width - width / 2;

  const y = Math.random() * canvas.height - height / 2;

```
  c.fillRect(
```
```
    x, 
```
```
    y, 
```
```
    width, 
```
```
    height);
```
```
}
```
```
 
```
```
save.download = 'big-image';
```

save.href = dataUriToBlob(canvas.toDataURL());

Weirdly if you try to save a massive data URI to a file (> 15mb) it will just fail. In order to do this properly, you need to convert to a blob first and then save. I encountered this at some point and learned of the solution from user doppelgreener over at stack overflow. Take a look at the post here.

August 17, 2021

// blob // canvas // graphics // javascript // stackoverflow // tricks

Golfed join

```
const str = ['one','-','two'].join``;
```
```
console.log(str);
```
```
// outputs "one-two"
```

With tagged templates you can pass a template string to a function without parens.

August 16, 2021

// golfed // javascript // strings // tricks

Make Math Global

Object.getOwnPropertyNames(Math).forEach(i => window[i] = Math[i]);

```
 
```
```
// or with map, just to be shorter
```

Object.getOwnPropertyNames(Math).map(i => window[i] = Math[i]);

```
 
```
```
// if this points to window
```

Object.getOwnPropertyNames(Math).map(i => this[i] = Math[i]);

```
 
```

// or using the deprecated "with" statement

```
with (Math) {
```
```
  console.log(PI, E, SQRT2, cos(1));
```
```
}
```

While not very useful, I sometimes like to make the entire Math object global on the window – just when speed coding and playing around.

August 15, 2021

// codegolf // javascript // math // tricks

Older Posts

Newer Posts

Mini Markdown Parser

Random Negative or Positive

Save Large Canvas

Golfed join

Make Math Global

Recent

Archive