Snippet Zone

Obfuscated Pre

```
b = document.body
```
```
with(b.style) 
```

  fontFamily = 'monospace', fontSize = '2em',

  transform = 'skew(10deg) translateX(40px)'

```
 
```
```
N = ' ';
```
```
 
```
```
(f=(_='*')=>(
```

  b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')

```
  (   )(   )(   )(   )(N)
```
```
   ('(')('0')('_')('_')(N)
```
```
    ('-')(   )(   )('-')(N)
```
```
     ('_')('_')('0')(')')(N)
```
```
      ('-')(   )(   )('-')(N)
```
```
       ('(')('0')('_')('_')(N)
```
```
        ('-')(   )(   )('-')(N)
```
```
         ('_')('_')('0')(')')(N)
```
```
          ('-')(   )(   )('-')(N)
```
```
           ('(')('0')('_')('_')(N)
```
```
            (   )(   )(   )(   )
```

Not really sure what this is… just playing around…

October 23, 2021

// codegolf // javascript // obfuscation // speed-coded // strings

Flatten Array Golf

```
 
```

console.log([100, 200, [2], [3, 4, [2, 3, [5]], 100]]+'')

```
// outputs: "100,200,2,3,4,2,3,5,100"
```

Coercing a multidimensional array to a string flattens it and joins it with commas

October 5, 2021

// arrays // codegolf // javascript // strings

Ellipse Path SVG

```
const ellipse = (cx, cy, rx, ry) => { 
```
```
  if (ry == null) ry = rx;
```
```
  return `
```
```
    M${cx-rx} ${cy}a${rx} ${ry} 
```
```
    0 1 0 ${rx*2} 0a${rx},${ry} 
```
```
    0 1 0 -${rx*2},0`
```
```
}
```
```
 
```
```
const svg = `
```

<svg style="overflow:hidden;stroke:black;fill:none">

```
 <path d="${ellipse(80, 50, 30)}" />
```

  <path d="${ellipse(80, 120, 60, 20)}" />

  <path d="${ellipse(150, 60, 20, 40)}" />

```
</svg>`
```
```
 
```
```
document.body.innerHTML = svg;
```

Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi

October 2, 2021

// javascript // strings // svg // tricks

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: () => ' '
```
```
  },
```
```
  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] = ' ';
```
```
    } 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, '$1')
```

    .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

Older Posts

Newer Posts

Obfuscated Pre

Flatten Array Golf

Ellipse Path SVG

Snippet Zone Code Highlighter

Mini-Markdown Alternate Version

Recent

Archive