emd 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 73970b7e6e3ffd9a2234e42594313055013aa9c34a8122af6fec40c8a39326e4
4
- data.tar.gz: 72f9c4cd5875a3af2ed54d9098711b0d5307e1f706cc60f8ff028aa03656bafa
3
+ metadata.gz: b6a120fcc380aac1adc2274b84b9ffeb5a17de5f34394fa3b021ef094a64e0dc
4
+ data.tar.gz: 8febe211f709ea3955ed3644b59c2024aefb944027ea06180792fad9f031c7e7
5
5
  SHA512:
6
- metadata.gz: ac1c8c53229940201a9ae56d2fbfd842c7846ab4afee4deb644846f0bbc43cc7a2457ecb9aaf273fe1b7ea71e8747a92fe526f154350f8489725ea6ba1b32627
7
- data.tar.gz: 93f34e0bca3bf3127f0a2a8380c30fb0acac128dc5c0230d066f646490983006b9a63a89c498d3e3a7442238c32853d774e278fcdebfafdc7612281fca039d6a
6
+ metadata.gz: 1b6bdfac43d21736ee4a43cec0301abf086162cb80a3518b3e9c79518474c806407c2215b3f8876d3693c44d37b9e4907f873239a2713d2217f4b822312557b8
7
+ data.tar.gz: 3e25d0961ca784466ffb95a120ba75791a113dc8fbcb2c96accaeede9f0f9538d19a716b4e77f011f2a10f7eba620aa1ec4e46cc95d20101e3bd45f445d23f78
data/README.md CHANGED
@@ -93,6 +93,36 @@ code {
93
93
  padding: .2em .4em;
94
94
  }
95
95
  ```
96
+
97
+ ### Enable number lines in your markdown's code block
98
+
99
+ To display number lines in your code block, add `emd.js` in `app/assets/javascripts/application.js`
100
+
101
+ ```javascript
102
+ //= require emd
103
+ //= require_tree .
104
+ ```
105
+
106
+ And add `emd.css` in `app/assets/stylesheets/application.css`
107
+
108
+ ```css
109
+ *= require emd
110
+ *= require_self
111
+ ```
112
+
113
+ ### Changing the color of the code block
114
+
115
+ To change the color of the code block, please use the following css selector:
116
+
117
+ ```css
118
+ div.code pre {
119
+ background-color: #fff;
120
+ }
121
+ ```
122
+
123
+ The default color is `#eee`
124
+
125
+
96
126
  ### Control which extensions Redcarpet uses
97
127
 
98
128
  `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
139
169
  ## TODO
140
170
 
141
171
  - [x] Syntax highlighting
172
+ - [x] Number lines in code block
142
173
  - [ ] Tests
143
174
  - [ ] Scaffolders
144
175
  - [ ] Example repo
145
176
  - [ ] Add a copy button to the code block
146
177
 
147
178
 
179
+
148
180
  ## Benefits
149
181
 
150
182
  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.
@@ -0,0 +1,12 @@
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ var pre = document.getElementsByTagName('pre'),
3
+ pl = pre.length;
4
+ for (var i = 0; i < pl; i++) {
5
+ pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
6
+ var num = pre[i].innerHTML.split(/\n/).length;
7
+ for (var j = 0; j < (num - 1); j++) {
8
+ var line_num = pre[i].getElementsByTagName('span')[0];
9
+ line_num.innerHTML += '<span>' + (j + 1) + '</span>';
10
+ }
11
+ }
12
+ })
@@ -0,0 +1,36 @@
1
+ pre {
2
+ display: block;
3
+ margin-top: 0;
4
+ margin-bottom: 1rem;
5
+ font-size: 0.7rem;
6
+ line-height: 1.4;
7
+ white-space: pre;
8
+ overflow: auto;
9
+ background-color:#eee;
10
+ border: 1px solid #ddd;
11
+ padding: .5rem;
12
+ max-height: 800px;
13
+ font-family: monospace;
14
+ code {
15
+ color: inherit;
16
+ background-color: transparent;
17
+ padding: 0;
18
+ display: block;
19
+ }
20
+ .line-number {
21
+ display: block;
22
+ float: left;
23
+ margin: 0 1em 0 -1em;
24
+ border-right: 1px solid #ddd;
25
+ text-align: right;
26
+ span {
27
+ display: block;
28
+ padding: 0 .5em 0 1em;
29
+ color: #ccc;
30
+ }
31
+ }
32
+ .cl {
33
+ display: block;
34
+ clear: both;
35
+ }
36
+ }
@@ -1,7 +1,7 @@
1
1
  class CodeRayify < Redcarpet::Render::HTML
2
2
  def block_code(code, language)
3
3
  if !Gem.loaded_specs.has_key?('coderay') || language == nil || language == ""
4
- %(<pre>#{code}</pre>)
4
+ %(<div class="CodeRay"><div class="code"><pre>#{code}</pre></div></div>)
5
5
  else
6
6
  CodeRay.scan(code, language).div
7
7
  end
@@ -1,3 +1,3 @@
1
1
  module Emd
2
- VERSION = "0.3.2"
2
+ VERSION = "0.4.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: emd
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Bryan Lim
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-07-20 00:00:00.000000000 Z
11
+ date: 2019-08-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: redcarpet
@@ -74,6 +74,8 @@ extensions: []
74
74
  extra_rdoc_files: []
75
75
  files:
76
76
  - README.md
77
+ - app/assets/javascripts/emd.js
78
+ - app/assets/stylesheets/emd.scss
77
79
  - app/helpers/emd_helper.rb
78
80
  - config/initializers/markdown_template_handler.rb
79
81
  - lib/emd.rb