POC of Js file visualizer

by Julien Roche

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-less.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-sass.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-scss.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-highlight/prism-line-highlight.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-highlight/prism-line-highlight.css">
<pre class="line-numbers" data-line="1-2, 5, 9-20"><code class="language-javascript"></code></pre>

CSS

.line-numbers .line-numbers-rows {
  pointer-events: initial;
}

.line-numbers .line-numbers-rows .line-numbers-row--clickable {
  background-color: rgba(124, 124, 124, 0.2);
  cursor: pointer;
  pointer-events: initial;
}

.line-numbers .line-numbers-rows .line-numbers-row--clickable:hover {
  background-color: rgba(124, 124, 124, 0.5);
}

Babel + JSX

let codeElement = document.querySelector('code');

// See http://prismjs.com/plugins/line-highlight/
// See http://prismjs.com/plugins/line-numbers/#examples

fetch('https://raw.githubusercontent.com/rochejul/npmversion/master/lib/version.js')
	.then(response => response.text())
	.then(javascriptContent => {
  	codeElement.innerHTML = javascriptContent;
    Prism.highlightElement(codeElement);
    
    let lineNumbersParentElement = codeElement.querySelector('.line-numbers-rows');
    let lines = codeElement.parentElement.getAttribute('data-line').split(',');
    lines = lines.map(line => line.trim().split('-')[0]);
    
    lines.forEach(line => {
    	lineNumbersParentElement.querySelector(`:nth-child(${line})`).classList.add('line-numbers-row--clickable');
    });
    
    lineNumbersParentElement.addEventListener(
    	'click',
      event => {
      	event.preventDefault();
        
        if (event.target.classList.contains('line-numbers-row--clickable')) {
        	alert('Says something about this line');
        }
      },
      true
    );
  })
  .catch(err => alert('Cannot display the code: ' + err));