emd 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73970b7e6e3ffd9a2234e42594313055013aa9c34a8122af6fec40c8a39326e4
-  data.tar.gz: 72f9c4cd5875a3af2ed54d9098711b0d5307e1f706cc60f8ff028aa03656bafa
+  metadata.gz: b6a120fcc380aac1adc2274b84b9ffeb5a17de5f34394fa3b021ef094a64e0dc
+  data.tar.gz: 8febe211f709ea3955ed3644b59c2024aefb944027ea06180792fad9f031c7e7
 SHA512:
-  metadata.gz: ac1c8c53229940201a9ae56d2fbfd842c7846ab4afee4deb644846f0bbc43cc7a2457ecb9aaf273fe1b7ea71e8747a92fe526f154350f8489725ea6ba1b32627
-  data.tar.gz: 93f34e0bca3bf3127f0a2a8380c30fb0acac128dc5c0230d066f646490983006b9a63a89c498d3e3a7442238c32853d774e278fcdebfafdc7612281fca039d6a
+  metadata.gz: 1b6bdfac43d21736ee4a43cec0301abf086162cb80a3518b3e9c79518474c806407c2215b3f8876d3693c44d37b9e4907f873239a2713d2217f4b822312557b8
+  data.tar.gz: 3e25d0961ca784466ffb95a120ba75791a113dc8fbcb2c96accaeede9f0f9538d19a716b4e77f011f2a10f7eba620aa1ec4e46cc95d20101e3bd45f445d23f78

data/README.md

@@ -93,6 +93,36 @@ code {
   padding: .2em .4em;
 }
 ```
+
+### Enable number lines in your markdown's code block
+
+To display number lines in your code block, add `emd.js` in `app/assets/javascripts/application.js`
+
+```javascript
+//= require emd
+//= require_tree .
+```
+
+And add `emd.css` in `app/assets/stylesheets/application.css`
+
+```css
+*= require emd
+*= require_self
+```
+
+### Changing the color of the code block
+
+To change the color of the code block, please use the following css selector: 
+
+```css
+div.code pre {
+  background-color: #fff;
+}
+```
+
+The default color is `#eee`
+
+
 ### Control which extensions Redcarpet uses
 
 `emd` assumes some sane redcarpet extension use (see redcarpets options [here](https://github.com/vmg/redcarpet#and-its-like-really-simple-to-use) and [here](https://github.com/vmg/redcarpet#darling-i-packed-you-a-couple-renderers-for-lunch)). If you need to overwrite these in your Rails app, create a file `config/initializers/markdown_template_handler.rb` to overwrite the defaults from [config/initializers/markdown_template_handler.rb](config/initializers/markdown_template_handler.rb) like this:
@@ -139,12 +169,14 @@ Special thanks to [these folks](http://stackoverflow.com/questions/4163560/how-c
 ## TODO
 
 - [x] Syntax highlighting 
+- [x] Number lines in code block
 - [ ] Tests
 - [ ] Scaffolders
 - [ ] Example repo
 - [ ] Add a copy button to the code block
 
 
+
 ## Benefits
 
 EMD uses a Rails engine and a simple initializer to initiate a markdown template handler with the help of Redcarpet and syntax highlighting from Coderay.

data/app/assets/javascripts/emd.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+  var pre = document.getElementsByTagName('pre'),
+  pl = pre.length;
+  for (var i = 0; i < pl; i++) {
+    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
+    var num = pre[i].innerHTML.split(/\n/).length;
+    for (var j = 0; j < (num - 1); j++) {
+        var line_num = pre[i].getElementsByTagName('span')[0];
+        line_num.innerHTML += '<span>' + (j + 1) + '</span>';
+    }
+  }
+})

data/app/assets/stylesheets/emd.scss

@@ -0,0 +1,36 @@
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 0.7rem;
+  line-height: 1.4;
+  white-space: pre;
+  overflow: auto;
+  background-color:#eee;
+  border: 1px solid #ddd;
+  padding: .5rem;
+  max-height: 800px;
+  font-family: monospace;
+  code {
+    color: inherit;
+    background-color: transparent;
+    padding: 0;
+    display: block;
+  }
+  .line-number {
+    display: block;
+    float: left;
+    margin: 0 1em 0 -1em;
+    border-right: 1px solid #ddd;
+    text-align: right;
+    span {
+      display: block;
+      padding: 0 .5em 0 1em;
+      color: #ccc;
+    }
+  }
+  .cl {
+    display: block;
+    clear: both;
+  }
+}

data/config/initializers/markdown_template_handler.rb

@@ -1,7 +1,7 @@
 class CodeRayify < Redcarpet::Render::HTML
   def block_code(code, language)
     if !Gem.loaded_specs.has_key?('coderay') ||  language == nil || language == "" 
-      %(<pre>#{code}</pre>)
+      %(<div class="CodeRay"><div class="code"><pre>#{code}</pre></div></div>)
     else 
       CodeRay.scan(code, language).div 
     end

data/lib/emd/version.rb

@@ -1,3 +1,3 @@
 module Emd
-  VERSION = "0.3.2"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: emd
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Bryan Lim
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-20 00:00:00.000000000 Z
+date: 2019-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: redcarpet
@@ -74,6 +74,8 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
+- app/assets/javascripts/emd.js
+- app/assets/stylesheets/emd.scss
 - app/helpers/emd_helper.rb
 - config/initializers/markdown_template_handler.rb
 - lib/emd.rb