Commits

nemunemu committed 4b48c8f

Use highlight.js instead of ace

  • Participants
  • Parent commits 7301bad

Comments (0)

Files changed (4)

app/assets/javascripts/backbone/routers/home_router.js.coffee

 
   home: ->
     @editor = new Glass.views.ViewerView
-      el: $('div#viewer')
+      el: $('#viewer')
 
     Glass.registerWorkspace(@editor)
 

app/assets/javascripts/backbone/views/viewer_view.js.coffee

 
 class namespace.ViewerView extends Backbone.View
   initialize: ->
-    @editor = ace.edit(@el)
-    @editor.container.style.opacity = ''
-    @editor.setOptions
-      maxLines: 30,
-      autoScrollEditorIntoView: true
-      # mode: 'ace/mode/javascript',
+    @setHighlight()
 
   open: (model) ->
     @changeModel(model)
     @model = model
 
   render: ->
-    @editor.setValue(@model.content)
+    @$el.html(@model.content)
+    @setHighlight()
+
+  setHighlight: ->
+    hljs.highlightBlock(@el)
+    eachline = @$el.html().split('\n')
+    code = _.map(eachline, (line) ->
+      console.log(line)
+      "<li class=\"viewer line\"><code>#{line}</code></li>"
+    ).join('')
+    @$el.html("<ul class=\"viewer code\">#{code}</ul>")
+

app/styles/main.scss

 @import 'sass-bootstrap/lib/bootstrap';
 @import 'sidr/src/scss/jquery.sidr.dark';
 
+ul.code.viewer {
+  padding-left: 0px;
+  list-style-type: none;
+  counter-reset: code_line
+}
+
+ul.code.viewer li.line:before {
+  content: counter(code_line);
+  text-align: right;
+  float: left;
+  width: 50px;
+  padding-right: 15px;
+  margin-right: 15px;
+  border-right: solid 1px green;
+}
+
+ul.code.viewer li.line:before {
+  clear: left;
+  counter-increment: code_line;
+}
+
 .sidr ul.children {
   padding-left: 10px;
 }
 
+/* */
+
 .browsehappy {
     margin: 0.2em 0;
     background: #ccc;
 }
 
 /* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 900px) {
     .container {
-        max-width: 730px;
+        max-width: 900px;
     }
 
     /* Remove the padding we set earlier */

app/views/index.ect

         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
         <!-- build:css(.tmp) styles/main.css -->
         <link rel="stylesheet" href="styles/main.css">
+        <link rel="stylesheet" href="bower_components/highlightjs/styles/solarized_light.css">
         <!-- endbuild -->
         <!-- build:js scripts/vendor/modernizr.js -->
         <script src="bower_components/modernizr/modernizr.js"></script>
               -->
 
               <div id="viewer-view">
-                <div id="viewer">
-                  // example code
-                  function hello() {
-                    console.log('hello world!')
-                  };
-                  hello();
-                </div>
+                <pre>
+                  <code id="viewer">
+// example code
+function hello() {
+  console.log('hello world!')
+};
+hello();
+                  </code>
+                </pre>
               </div>
 
               <!--
         <script src="bower_components/underscore/underscore.js"></script>
         <script src="bower_components/backbone/backbone.js"></script>
 
-        <script src="bower_components/ace/build/src/ace.js"></script>
         <script src="bower_components/sidr/src/jquery.sidr.js"></script>
+        <script src="bower_components/highlightjs/highlight.pack.js"></script>
 
         <script src="assets/application.js"></script>
         <!-- endbuild -->