Add basic code view and sourceMapping

src/App.tsx

@@ -1,24 +1,45 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+import { sourceMapping } from "./sourceMapping";
+
+import "./tailwind.output.css";
+
+import "./App.css";
+
+const exampleCode = `var test = \`asd
+World!\`; abc()`;
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <div>
+      <Highlight {...defaultProps} code={exampleCode} language="jsx">
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          sourceMapping.reset(),
+          (
+            <pre className={className} style={style}>
+              {tokens.map((line, i) => (
+                <div
+                  data-line={JSON.stringify(line)}
+                  {...getLineProps({ line, key: i })}
                 >
-          Learn React
-        </a>
-      </header>
+                  {line.map(function (token, key) {
+                    const refFn = sourceMapping.registerToken(token);
+                    return (
+                      <span
+                        ref={refFn}
+                        data-token={JSON.stringify(token)}
+                        {...getTokenProps({ token, key })}
+                      />
+                    );
+                  })}
+                  {(sourceMapping.registerLineEnd(), null)}
+                </div>
+              ))}
+            </pre>
+          )
+        )}
+      </Highlight>
     </div>
   );
 }

src/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 24px;
 }
 
 code {

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { sourceMapping } from './sourceMapping';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,6 +12,8 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
+console.log(sourceMapping);
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA

src/prism-types.ts

@@ -0,0 +1,5 @@
+export type Token = {
+  types: string[];
+  content: string;
+  empty?: boolean;
+};

src/sourceMapping.tsx

@@ -0,0 +1,50 @@
+import { Token } from "./prism-types";
+
+interface TMappingELement {
+  start: number;
+  end: number;
+  ref: { current: HTMLElement | null };
+}
+
+interface TSourceMapping {
+  mappingArray: Array<TMappingELement>;
+  lastEnd: number;
+  registerToken(t: Token): (ele: HTMLElement | null) => void;
+  registerLineEnd: () => void;
+  reset: () => void;
+  getElementsInRange(start: number, end: number): HTMLElement[];
+}
+
+export const sourceMapping: TSourceMapping = {
+  mappingArray: [],
+  lastEnd: 0,
+  registerToken(t: Token) {
+    const obj: TMappingELement = {
+      start: this.lastEnd,
+      end: this.lastEnd + t.content.length,
+      ref: { current: null },
+    };
+    this.mappingArray.push(obj);
+    this.lastEnd = this.mappingArray[this.mappingArray.length - 1].end;
+
+    console.log(obj, t);
+    
+
+    return function updateHTMLElement(ele) {
+      obj.ref.current = ele;
+    };
+  },
+  registerLineEnd() {
+    this.lastEnd += 1;
+    if (this.mappingArray.length > 0) {
+      this.mappingArray[this.mappingArray.length - 1].end = this.lastEnd;
+    }
+  },
+  reset() {
+    this.mappingArray = [];
+    this.lastEnd = 0;
+  },
+  getElementsInRange(start, end) {
+    return [];
+  },
+};