JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.11.0/document-register-element.js"></script>
<script>
  (function() {
  	var newline = '\n';
    function validate(text) {
    	if(/\<|\>/.test(text)) return false;
    	if(text[0] === '/' || text.indexOf('http') === 0) return true;
      return false;
    }
    function link(text) {
    	return ['<a href="',text,'">',text,'</a>'].join('');
    }
    document.registerElement('pre-links', {
      extends: 'pre',
      prototype: Object.create(
        HTMLPreElement.prototype, {
          createdCallback: {
            value: function() {
              var lines = this.innerHTML.split(newline),i;
              for (i = 0; i < lines.length; i++) {
              	lines[i] = validate(lines[i]) ? link(lines[i]) : lines[i];
              }
              this.innerHTML = lines.join(newline);
            }
          },
          attachedCallback: {value: function() {}},
          detachedCallback: {value: function() {}},
          attributeChangedCallback: {value: function() {}},
        }
      ),
    });
  })();
</script>

<pre is="pre-links">
reference:
/lorem/ipsum/foobar.html
https://github.com/WebReflection/document-register-element
</pre>