<pre id='javascript'></pre>

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:[email protected];400&family=Poppins:[email protected];300;400;500&display=swap');

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: hsl(0 0% 15%);
  display: flex;
  color: hsl(0 0% 80%);
  justify-content: center;
  padding: 2rem 0 5rem;
}

pre::-webkit-scrollbar {
  width: 1em;
}
 
pre::-webkit-scrollbar-track {
  background-color: #111;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
 
pre::-webkit-scrollbar-thumb {
  background-color: #333;
  outline: 1px solid #222;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

pre {
  max-width: 900px;
  width: 100%;
  background-color: hsl(0 0% 10%);
  color: hsl(0 0% 85%);
  border-radius: 10px;
  padding: 2rem 1rem;
  font-size: clamp(0.95rem, 0.500rem + 1.250vw, 1.1rem);
  line-height: clamp(1.4rem, 0.500rem + 2.500vw, 1.7rem);
  counter-reset: line;
  overflow: auto;
  white-space: pre;
  
  // fake right-padding
  code:after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1px;
  }
  
  code {
    display: block;
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    height: clamp(1.4rem, 0.500rem + 2.500vw, 1.7rem);
    counter-increment: line;
    tab-size: 2;
  }
  
  code:before{
    display: inline-block;
    content: counter(line);
    width: 2rem;
    text-align: right;
    margin-right: 1.5rem;
    color: hsl(0 0 40%);
  }
  
  .string,
  .templateString {
    color: hsl(30 50% 60%);
  }
  
  .regex {
    color: hsl(10 60% 60%);
  }
  
  .comment {
    color: hsl(120 20% 60%);
  }
  
  .spread {
    color: hsl(308 15% 60%);
  }
  
  .prop {
    color: hsl(308 15% 60%);
  }
  
  .keyword {
    color: hsl(210 60% 70%);
  }
  
  .primitive {
    color: hsl(200 70% 70%);
  }
  
  .bracket {
    color: hsl(50 60% 50%);
  }
  
  .type {
    color: hsl(10 60% 70%);
  }
}

import tokens from 'https://assets.codepen.io/3351103/js-regexes.js'

const source = (rx) => rx.source

const concatRx = (args) => args.map(source).join('|')

const jsTokensRx = new RegExp(concatRx(tokens),'gm')

const addSpan = (text, className) => {
  const span = document.createElement('span')
  span.className = className
  span.textContent = text
  return span.outerHTML
}

const highlightJS = (codeMarkup, regex = jsTokensRx) => {
  return codeMarkup.replaceAll(regex, (...args) => {
    // last index contains named matches e.g.
    // { string: undefined, comment: '// comment here', regex: undefined ...}
    const [matches] = args.slice(-1)

    for (const type in matches) {
      const match = matches[type]
      
      if (match) {
        return addSpan(match, type)
      }
    }
  })
}

const addLines = (code) => {
  return code
    .split(/\n/)
    .map((line) => `<code>${line}</code>`)
    .join('')
}

(async() => {
  // import a text file containing the raw code
  const response = await fetch('https://assets.codepen.io/3351103/sample-code_1.txt')
  const code = await response.text()

  document
   .querySelector('#javascript')
   .insertAdjacentHTML('afterbegin', addLines(highlightJS(code)))
})()