chore: add line numbers in the example

react-simple-code-editor · Jul 1, 2018 · 809d5f0 · 809d5f0
1 parent 6f05861
commit 809d5f0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/example/App.js b/example/App.js
@@ -51,7 +51,15 @@ class App extends React.Component<{}, State> {
             <Editor
               value={this.state.code}
               onValueChange={code => this.setState({ code })}
-              highlight={code => highlight(code, languages.jsx)}
+              highlight={code =>
+                highlight(code, languages.jsx)
+                  .split('\n')
+                  .map(
+                    line =>
+                      `<span class="container_editor_line_number">${line}</span>`
+                  )
+                  .join('\n')
+              }
               padding={10}
               className="container__editor"
             />

diff --git a/example/styles.css b/example/styles.css
@@ -44,13 +44,26 @@ body {
   max-height: 400px;
   overflow: auto;
   margin: 1.67em 0;
+  padding-left: 3em;
 }
 
 .container__editor {
   font-size: 12px;
   font-variant-ligatures: common-ligatures;
   background-color: #fafafa;
   border-radius: 3px;
+  counter-reset: line;
+}
+
+.container_editor_line_number:before {
+  position: absolute;
+  right: 100%;
+  margin-right: 10px;
+  text-align: right;
+  opacity: .3;
+  user-select: none;
+  counter-increment: line;
+  content: counter(line);
 }
 
 .container__editor textarea {