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 +4 -4
- data/README.md +32 -0
- data/app/assets/javascripts/emd.js +12 -0
- data/app/assets/stylesheets/emd.scss +36 -0
- data/config/initializers/markdown_template_handler.rb +1 -1
- data/lib/emd/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b6a120fcc380aac1adc2274b84b9ffeb5a17de5f34394fa3b021ef094a64e0dc
|
4
|
+
data.tar.gz: 8febe211f709ea3955ed3644b59c2024aefb944027ea06180792fad9f031c7e7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
data/lib/emd/version.rb
CHANGED
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.
|
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-
|
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
|