markdown_to_html 0.0.2 → 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/.rvmrc +48 -0
- data/README.md +2 -2
- data/bin/markdown_to_html +0 -0
- data/lib/markdown_to_html.rb +6 -1
- data/lib/markdown_to_html/version.rb +1 -1
- data/test/index.html +560 -0
- metadata +4 -1
data/.rvmrc
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
#!/usr/bin/env bash
|
|
2
|
+
|
|
3
|
+
# This is an RVM Project .rvmrc file, used to automatically load the ruby
|
|
4
|
+
# development environment upon cd'ing into the directory
|
|
5
|
+
|
|
6
|
+
# First we specify our desired <ruby>[@<gemset>], the @gemset name is optional,
|
|
7
|
+
# Only full ruby name is supported here, for short names use:
|
|
8
|
+
# echo "rvm use 1.9.2" > .rvmrc
|
|
9
|
+
environment_id="ruby-1.9.2-p320"
|
|
10
|
+
|
|
11
|
+
# Uncomment the following lines if you want to verify rvm version per project
|
|
12
|
+
# rvmrc_rvm_version="1.17.7 (master)" # 1.10.1 seams as a safe start
|
|
13
|
+
# eval "$(echo ${rvm_version}.${rvmrc_rvm_version} | awk -F. '{print "[[ "$1*65536+$2*256+$3" -ge "$4*65536+$5*256+$6" ]]"}' )" || {
|
|
14
|
+
# echo "This .rvmrc file requires at least RVM ${rvmrc_rvm_version}, aborting loading."
|
|
15
|
+
# return 1
|
|
16
|
+
# }
|
|
17
|
+
|
|
18
|
+
# First we attempt to load the desired environment directly from the environment
|
|
19
|
+
# file. This is very fast and efficient compared to running through the entire
|
|
20
|
+
# CLI and selector. If you want feedback on which environment was used then
|
|
21
|
+
# insert the word 'use' after --create as this triggers verbose mode.
|
|
22
|
+
if [[ -d "${rvm_path:-$HOME/.rvm}/environments"
|
|
23
|
+
&& -s "${rvm_path:-$HOME/.rvm}/environments/$environment_id" ]]
|
|
24
|
+
then
|
|
25
|
+
\. "${rvm_path:-$HOME/.rvm}/environments/$environment_id"
|
|
26
|
+
[[ -s "${rvm_path:-$HOME/.rvm}/hooks/after_use" ]] &&
|
|
27
|
+
\. "${rvm_path:-$HOME/.rvm}/hooks/after_use" || true
|
|
28
|
+
else
|
|
29
|
+
# If the environment file has not yet been created, use the RVM CLI to select.
|
|
30
|
+
rvm --create "$environment_id" || {
|
|
31
|
+
echo "Failed to create RVM environment '${environment_id}'."
|
|
32
|
+
return 1
|
|
33
|
+
}
|
|
34
|
+
fi
|
|
35
|
+
|
|
36
|
+
# If you use bundler, this might be useful to you:
|
|
37
|
+
# if [[ -s Gemfile ]] && {
|
|
38
|
+
# ! builtin command -v bundle >/dev/null ||
|
|
39
|
+
# builtin command -v bundle | GREP_OPTIONS= \grep $rvm_path/bin/bundle >/dev/null
|
|
40
|
+
# }
|
|
41
|
+
# then
|
|
42
|
+
# printf "%b" "The rubygem 'bundler' is not installed. Installing it now.\n"
|
|
43
|
+
# gem install bundler
|
|
44
|
+
# fi
|
|
45
|
+
# if [[ -s Gemfile ]] && builtin command -v bundle >/dev/null
|
|
46
|
+
# then
|
|
47
|
+
# bundle install | GREP_OPTIONS= \grep -vE '^Using|Your bundle is complete'
|
|
48
|
+
# fi
|
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# MarkdownToHtml
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
With the funtionality of rendering github flavored markdown file into a html file, markdown_to_html also offers user a good-looking html style, making reading rendered html document an enjoyment.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -18,7 +18,7 @@ Or install it yourself as:
|
|
|
18
18
|
|
|
19
19
|
## Usage
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
markdown_to_html your_markdown_file [html_output_name]
|
|
22
22
|
|
|
23
23
|
## Contributing
|
|
24
24
|
|
data/bin/markdown_to_html
CHANGED
|
File without changes
|
data/lib/markdown_to_html.rb
CHANGED
|
@@ -15,7 +15,12 @@ module MarkdownToHtml
|
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
class Renderer
|
|
18
|
-
def initialize(markdown_file, html_file = nil)
|
|
18
|
+
def initialize(markdown_file = nil, html_file = nil)
|
|
19
|
+
if markdown_file.nil? || %w(-h --help).include?(markdown_file)
|
|
20
|
+
puts "Usage: markdown_to_html your_markdown_file [html]"
|
|
21
|
+
return
|
|
22
|
+
end
|
|
23
|
+
|
|
19
24
|
markdown = Redcarpet::Markdown.new(HTMLWithPygments,
|
|
20
25
|
:fenced_code_blocks => true,
|
|
21
26
|
:no_intra_emphasis => true)
|
data/test/index.html
ADDED
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<style>
|
|
4
|
+
body {
|
|
5
|
+
font: 13px Helvetica, arial, freesans, clean, sans-serif;
|
|
6
|
+
color: #333;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
line-height: 1.6;
|
|
9
|
+
padding: 20px 100px;
|
|
10
|
+
}
|
|
11
|
+
body>*:first-child {
|
|
12
|
+
margin-top: 0 !important;
|
|
13
|
+
}
|
|
14
|
+
body>*:last-child {
|
|
15
|
+
margin-bottom: 0 !important;
|
|
16
|
+
}
|
|
17
|
+
a.absent {
|
|
18
|
+
color: #c00;
|
|
19
|
+
}
|
|
20
|
+
a.anchor {
|
|
21
|
+
display: block;
|
|
22
|
+
padding-left: 30px;
|
|
23
|
+
margin-left: -30px;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: 0;
|
|
27
|
+
left: 0;
|
|
28
|
+
bottom: 0;
|
|
29
|
+
}
|
|
30
|
+
h1, h2, h3, h4, h5, h6 {
|
|
31
|
+
margin: 20px 0 10px;
|
|
32
|
+
padding: 0;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
cursor: text;
|
|
36
|
+
position: relative;
|
|
37
|
+
}
|
|
38
|
+
h1 .mini-icon-link, h2 .mini-icon-link, h3 .mini-icon-link, h4 .mini-icon-link, h5 .mini-icon-link, h6 .mini-icon-link {
|
|
39
|
+
display: none;
|
|
40
|
+
color: #000;
|
|
41
|
+
}
|
|
42
|
+
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
line-height: 1;
|
|
45
|
+
padding-left: 0;
|
|
46
|
+
margin-left: -22px;
|
|
47
|
+
top: 15%;
|
|
48
|
+
}
|
|
49
|
+
h1:hover a.anchor .mini-icon-link, h2:hover a.anchor .mini-icon-link, h3:hover a.anchor .mini-icon-link, h4:hover a.anchor .mini-icon-link, h5:hover a.anchor .mini-icon-link, h6:hover a.anchor .mini-icon-link {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
}
|
|
52
|
+
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
|
|
53
|
+
font-size: inherit;
|
|
54
|
+
}
|
|
55
|
+
h1 {
|
|
56
|
+
font-size: 28px;
|
|
57
|
+
color: #000;
|
|
58
|
+
}
|
|
59
|
+
h2 {
|
|
60
|
+
font-size: 24px;
|
|
61
|
+
border-bottom: 1px solid #ccc;
|
|
62
|
+
color: #000;
|
|
63
|
+
}
|
|
64
|
+
h3 {
|
|
65
|
+
font-size: 18px;
|
|
66
|
+
}
|
|
67
|
+
h4 {
|
|
68
|
+
font-size: 16px;
|
|
69
|
+
}
|
|
70
|
+
h5 {
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
}
|
|
73
|
+
h6 {
|
|
74
|
+
color: #777;
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
}
|
|
77
|
+
p, blockquote, ul, ol, dl, table, pre {
|
|
78
|
+
margin: 15px 0;
|
|
79
|
+
}
|
|
80
|
+
hr {
|
|
81
|
+
background: transparent url("https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-0e7d81b119cc9beae17b0c98093d121fa0050a74.png") repeat-x 0 0;
|
|
82
|
+
border: 0 none;
|
|
83
|
+
color: #ccc;
|
|
84
|
+
height: 4px;
|
|
85
|
+
padding: 0;
|
|
86
|
+
}
|
|
87
|
+
body>h2:first-child,body>>h1:first-child,body>>h1:first-child+h2,body>>h3:first-child,body>>h4:first-child,body>>h5:first-child,body>>h6:first-child {
|
|
88
|
+
margin-top: 0;
|
|
89
|
+
padding-top: 0;
|
|
90
|
+
}
|
|
91
|
+
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
|
|
92
|
+
margin-top: 0;
|
|
93
|
+
padding-top: 0;
|
|
94
|
+
}
|
|
95
|
+
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
|
|
96
|
+
margin-top: 0;
|
|
97
|
+
}
|
|
98
|
+
li p.first {
|
|
99
|
+
display: inline-block;
|
|
100
|
+
}
|
|
101
|
+
ul, ol {
|
|
102
|
+
padding-left: 30px;
|
|
103
|
+
}
|
|
104
|
+
ul.no-list, ol.no-list {
|
|
105
|
+
list-style-type: none;
|
|
106
|
+
padding: 0;
|
|
107
|
+
}
|
|
108
|
+
ul li>:first-child, ul li ul:first-of-type, ul li ol:first-of-type, ol li>:first-child, ol li ul:first-of-type, ol li ol:first-of-type {
|
|
109
|
+
margin-top: 0px;
|
|
110
|
+
}
|
|
111
|
+
ul li p:last-of-type, ol li p:last-of-type {
|
|
112
|
+
margin-bottom: 0;
|
|
113
|
+
}
|
|
114
|
+
ul ul, ul ol, ol ol, ol ul {
|
|
115
|
+
margin-bottom: 0;
|
|
116
|
+
}
|
|
117
|
+
dl {
|
|
118
|
+
padding: 0;
|
|
119
|
+
}
|
|
120
|
+
dl dt {
|
|
121
|
+
font-size: 14px;
|
|
122
|
+
font-weight: bold;
|
|
123
|
+
font-style: italic;
|
|
124
|
+
padding: 0;
|
|
125
|
+
margin: 15px 0 5px;
|
|
126
|
+
}
|
|
127
|
+
dl dt:first-child {
|
|
128
|
+
padding: 0;
|
|
129
|
+
}
|
|
130
|
+
dl dt>:first-child {
|
|
131
|
+
margin-top: 0px;
|
|
132
|
+
}
|
|
133
|
+
dl dt>:last-child {
|
|
134
|
+
margin-bottom: 0px;
|
|
135
|
+
}
|
|
136
|
+
dl dd {
|
|
137
|
+
margin: 0 0 15px;
|
|
138
|
+
padding: 0 15px;
|
|
139
|
+
}
|
|
140
|
+
dl dd>:first-child {
|
|
141
|
+
margin-top: 0px;
|
|
142
|
+
}
|
|
143
|
+
dl dd>:last-child {
|
|
144
|
+
margin-bottom: 0px;
|
|
145
|
+
}
|
|
146
|
+
blockquote {
|
|
147
|
+
border-left: 4px solid #DDD;
|
|
148
|
+
padding: 0 15px;
|
|
149
|
+
color: #777;
|
|
150
|
+
}
|
|
151
|
+
blockquote>:first-child {
|
|
152
|
+
margin-top: 0px;
|
|
153
|
+
}
|
|
154
|
+
blockquote>:last-child {
|
|
155
|
+
margin-bottom: 0px;
|
|
156
|
+
}
|
|
157
|
+
table th {
|
|
158
|
+
font-weight: bold;
|
|
159
|
+
}
|
|
160
|
+
table th, table td {
|
|
161
|
+
border: 1px solid #ccc;
|
|
162
|
+
padding: 6px 13px;
|
|
163
|
+
}
|
|
164
|
+
table tr {
|
|
165
|
+
border-top: 1px solid #ccc;
|
|
166
|
+
background-color: #fff;
|
|
167
|
+
}
|
|
168
|
+
table tr:nth-child(2n) {
|
|
169
|
+
background-color: #f8f8f8;
|
|
170
|
+
}
|
|
171
|
+
img {
|
|
172
|
+
max-width: 100%;
|
|
173
|
+
-moz-box-sizing: border-box;
|
|
174
|
+
box-sizing: border-box;
|
|
175
|
+
}
|
|
176
|
+
span.frame {
|
|
177
|
+
display: block;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
}
|
|
180
|
+
span.frame>span {
|
|
181
|
+
border: 1px solid #ddd;
|
|
182
|
+
display: block;
|
|
183
|
+
float: left;
|
|
184
|
+
overflow: hidden;
|
|
185
|
+
margin: 13px 0 0;
|
|
186
|
+
padding: 7px;
|
|
187
|
+
width: auto;
|
|
188
|
+
}
|
|
189
|
+
span.frame span img {
|
|
190
|
+
display: block;
|
|
191
|
+
float: left;
|
|
192
|
+
}
|
|
193
|
+
span.frame span span {
|
|
194
|
+
clear: both;
|
|
195
|
+
color: #333;
|
|
196
|
+
display: block;
|
|
197
|
+
padding: 5px 0 0;
|
|
198
|
+
}
|
|
199
|
+
span.align-center {
|
|
200
|
+
display: block;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
clear: both;
|
|
203
|
+
}
|
|
204
|
+
span.align-center>span {
|
|
205
|
+
display: block;
|
|
206
|
+
overflow: hidden;
|
|
207
|
+
margin: 13px auto 0;
|
|
208
|
+
text-align: center;
|
|
209
|
+
}
|
|
210
|
+
span.align-center span img {
|
|
211
|
+
margin: 0 auto;
|
|
212
|
+
text-align: center;
|
|
213
|
+
}
|
|
214
|
+
span.align-right {
|
|
215
|
+
display: block;
|
|
216
|
+
overflow: hidden;
|
|
217
|
+
clear: both;
|
|
218
|
+
}
|
|
219
|
+
span.align-right>span {
|
|
220
|
+
display: block;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
margin: 13px 0 0;
|
|
223
|
+
text-align: right;
|
|
224
|
+
}
|
|
225
|
+
span.align-right span img {
|
|
226
|
+
margin: 0;
|
|
227
|
+
text-align: right;
|
|
228
|
+
}
|
|
229
|
+
span.float-left {
|
|
230
|
+
display: block;
|
|
231
|
+
margin-right: 13px;
|
|
232
|
+
overflow: hidden;
|
|
233
|
+
float: left;
|
|
234
|
+
}
|
|
235
|
+
span.float-left span {
|
|
236
|
+
margin: 13px 0 0;
|
|
237
|
+
}
|
|
238
|
+
span.float-right {
|
|
239
|
+
display: block;
|
|
240
|
+
margin-left: 13px;
|
|
241
|
+
overflow: hidden;
|
|
242
|
+
float: right;
|
|
243
|
+
}
|
|
244
|
+
span.float-right>span {
|
|
245
|
+
display: block;
|
|
246
|
+
overflow: hidden;
|
|
247
|
+
margin: 13px auto 0;
|
|
248
|
+
text-align: right;
|
|
249
|
+
}
|
|
250
|
+
code, tt {
|
|
251
|
+
margin: 0 2px;
|
|
252
|
+
padding: 0px 5px;
|
|
253
|
+
border: 1px solid #eaeaea;
|
|
254
|
+
background-color: #f8f8f8;
|
|
255
|
+
border-radius: 3px;
|
|
256
|
+
}
|
|
257
|
+
code {
|
|
258
|
+
white-space: nowrap;
|
|
259
|
+
}
|
|
260
|
+
pre>code {
|
|
261
|
+
margin: 0;
|
|
262
|
+
padding: 0;
|
|
263
|
+
white-space: pre;
|
|
264
|
+
border: none;
|
|
265
|
+
background: transparent;
|
|
266
|
+
}
|
|
267
|
+
.highlight pre, pre {
|
|
268
|
+
background-color: #f8f8f8;
|
|
269
|
+
border: 1px solid #ccc;
|
|
270
|
+
font-size: 13px;
|
|
271
|
+
line-height: 19px;
|
|
272
|
+
overflow: auto;
|
|
273
|
+
padding: 6px 10px;
|
|
274
|
+
border-radius: 3px;
|
|
275
|
+
}
|
|
276
|
+
pre code, pre tt {
|
|
277
|
+
margin: 0;
|
|
278
|
+
padding: 0;
|
|
279
|
+
background-color: transparent;
|
|
280
|
+
border: none;
|
|
281
|
+
}
|
|
282
|
+
blockquote {
|
|
283
|
+
border: 0 none;
|
|
284
|
+
padding: 0 0 0 40px;
|
|
285
|
+
}
|
|
286
|
+
.activity-tab .news blockquote {
|
|
287
|
+
padding-left: 0;
|
|
288
|
+
}
|
|
289
|
+
.hll { background-color: #ffffcc }
|
|
290
|
+
.c { color: #408080; font-style: italic } /* Comment */
|
|
291
|
+
.err { border: 1px solid #FF0000 } /* Error */
|
|
292
|
+
.k { color: #008000; font-weight: bold } /* Keyword */
|
|
293
|
+
.o { color: #666666 } /* Operator */
|
|
294
|
+
.cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
|
295
|
+
.cp { color: #BC7A00 } /* Comment.Preproc */
|
|
296
|
+
.c1 { color: #408080; font-style: italic } /* Comment.Single */
|
|
297
|
+
.cs { color: #408080; font-style: italic } /* Comment.Special */
|
|
298
|
+
.gd { color: #A00000 } /* Generic.Deleted */
|
|
299
|
+
.ge { font-style: italic } /* Generic.Emph */
|
|
300
|
+
.gr { color: #FF0000 } /* Generic.Error */
|
|
301
|
+
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
|
302
|
+
.gi { color: #00A000 } /* Generic.Inserted */
|
|
303
|
+
.go { color: #888888 } /* Generic.Output */
|
|
304
|
+
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
|
305
|
+
.gs { font-weight: bold } /* Generic.Strong */
|
|
306
|
+
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
|
307
|
+
.gt { color: #0044DD } /* Generic.Traceback */
|
|
308
|
+
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
|
309
|
+
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
|
310
|
+
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
|
311
|
+
.kp { color: #008000 } /* Keyword.Pseudo */
|
|
312
|
+
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
|
313
|
+
.kt { color: #B00040 } /* Keyword.Type */
|
|
314
|
+
.m { color: #666666 } /* Literal.Number */
|
|
315
|
+
.s { color: #BA2121 } /* Literal.String */
|
|
316
|
+
.na { color: #7D9029 } /* Name.Attribute */
|
|
317
|
+
.nb { color: #008000 } /* Name.Builtin */
|
|
318
|
+
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
|
319
|
+
.no { color: #880000 } /* Name.Constant */
|
|
320
|
+
.nd { color: #AA22FF } /* Name.Decorator */
|
|
321
|
+
.ni { color: #999999; font-weight: bold } /* Name.Entity */
|
|
322
|
+
.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
|
323
|
+
.nf { color: #0000FF } /* Name.Function */
|
|
324
|
+
.nl { color: #A0A000 } /* Name.Label */
|
|
325
|
+
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
|
326
|
+
.nt { color: #008000; font-weight: bold } /* Name.Tag */
|
|
327
|
+
.nv { color: #19177C } /* Name.Variable */
|
|
328
|
+
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
|
329
|
+
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
330
|
+
.mf { color: #666666 } /* Literal.Number.Float */
|
|
331
|
+
.mh { color: #666666 } /* Literal.Number.Hex */
|
|
332
|
+
.mi { color: #666666 } /* Literal.Number.Integer */
|
|
333
|
+
.mo { color: #666666 } /* Literal.Number.Oct */
|
|
334
|
+
.sb { color: #BA2121 } /* Literal.String.Backtick */
|
|
335
|
+
.sc { color: #BA2121 } /* Literal.String.Char */
|
|
336
|
+
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
|
|
337
|
+
.s2 { color: #BA2121 } /* Literal.String.Double */
|
|
338
|
+
.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
|
339
|
+
.sh { color: #BA2121 } /* Literal.String.Heredoc */
|
|
340
|
+
.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
|
341
|
+
.sx { color: #008000 } /* Literal.String.Other */
|
|
342
|
+
.sr { color: #BB6688 } /* Literal.String.Regex */
|
|
343
|
+
.s1 { color: #BA2121 } /* Literal.String.Single */
|
|
344
|
+
.ss { color: #19177C } /* Literal.String.Symbol */
|
|
345
|
+
.bp { color: #008000 } /* Name.Builtin.Pseudo */
|
|
346
|
+
.vc { color: #19177C } /* Name.Variable.Class */
|
|
347
|
+
.vg { color: #19177C } /* Name.Variable.Global */
|
|
348
|
+
.vi { color: #19177C } /* Name.Variable.Instance */
|
|
349
|
+
.il { color: #666666 } /* Literal.Number.Integer.Long */
|
|
350
|
+
</style>
|
|
351
|
+
</head>
|
|
352
|
+
<body>
|
|
353
|
+
<h1>ViewAssets</h1>
|
|
354
|
+
|
|
355
|
+
<p>ViewAssets(VA) 是一个简单的 Javascript, Stylesheets 依赖管理器。 根据 Rails 3.2 中的 asset pipeline，它会默认加载所有的 assets 资源，这样其实对于富 JS 应用而言并不是特别有利。因为每个页面有可能都包含着大量其它页面都需要用到的文件资源。VA 就是为了解决这个问题而提出来的。它支持每个页面都能够加载自己需要的 assets 资源，同时也保留了 assets pipeline 自动处理依赖的优点。 </p>
|
|
356
|
+
|
|
357
|
+
<p>简单的概括这个 <span style='color:red;'>gem</span> 就是它将在 view 中 *.html.erb 中声明的依赖转移到 js/css 文件中。在特定的文件(manifest file)中使用规定的语法(directive)声明依赖。 </p>
|
|
358
|
+
|
|
359
|
+
<h2>Example</h2>
|
|
360
|
+
|
|
361
|
+
<p>下面的目录是一个 rails 项目的 public 文件夹。</p>
|
|
362
|
+
<div class="highlight"><pre><span class="p">.</span>
|
|
363
|
+
├── <span class="mf">404.</span><span class="n">html</span>
|
|
364
|
+
├── <span class="mf">422.</span><span class="n">html</span>
|
|
365
|
+
├── <span class="mf">500.</span><span class="n">html</span>
|
|
366
|
+
├── <span class="n">app</span>
|
|
367
|
+
│ ├── <span class="n">javascripts</span>
|
|
368
|
+
│ │ ├── <span class="n">application</span><span class="p">.</span><span class="n">js</span>
|
|
369
|
+
│ │ ├── <span class="n">bar</span>
|
|
370
|
+
│ │ │ ├── <span class="n">index</span>
|
|
371
|
+
│ │ │ │ ├── <span class="n">index</span><span class="p">.</span><span class="n">js</span>
|
|
372
|
+
│ │ │ │ └── <span class="n">others</span><span class="p">.</span><span class="n">js</span>
|
|
373
|
+
│ │ │ └── <span class="n">show</span><span class="p">.</span><span class="n">js</span>
|
|
374
|
+
│ │ └── <span class="n">foo</span>
|
|
375
|
+
│ │ ├── <span class="n">foo</span><span class="p">.</span><span class="n">js</span>
|
|
376
|
+
│ │ ├── <span class="n">index</span>
|
|
377
|
+
│ │ │ ├── <span class="n">index</span><span class="p">.</span><span class="n">js</span>
|
|
378
|
+
│ │ │ └── <span class="n">others</span><span class="p">.</span><span class="n">js</span>
|
|
379
|
+
│ │ └── <span class="n">show</span><span class="p">.</span><span class="n">js</span>
|
|
380
|
+
│ └── <span class="n">stylesheets</span>
|
|
381
|
+
│ ├── <span class="n">application</span><span class="p">.</span><span class="n">css</span>
|
|
382
|
+
│ ├── <span class="n">bar</span>
|
|
383
|
+
│ │ ├── <span class="n">index</span>
|
|
384
|
+
│ │ │ ├── <span class="n">index</span><span class="p">.</span><span class="n">css</span>
|
|
385
|
+
│ │ │ └── <span class="n">others</span><span class="p">.</span><span class="n">css</span>
|
|
386
|
+
│ │ └── <span class="n">show</span><span class="p">.</span><span class="n">css</span>
|
|
387
|
+
│ └── <span class="n">foo</span>
|
|
388
|
+
│ ├── <span class="n">foo</span><span class="p">.</span><span class="n">css</span>
|
|
389
|
+
│ ├── <span class="n">index</span>
|
|
390
|
+
│ │ ├── <span class="n">index</span><span class="p">.</span><span class="n">css</span>
|
|
391
|
+
│ │ └── <span class="n">others</span><span class="p">.</span><span class="n">css</span>
|
|
392
|
+
│ └── <span class="n">show</span><span class="p">.</span><span class="n">css</span>
|
|
393
|
+
├── <span class="n">favicon</span><span class="p">.</span><span class="n">ico</span>
|
|
394
|
+
├── <span class="n">lib</span>
|
|
395
|
+
│ ├── <span class="n">javascripts</span>
|
|
396
|
+
│ │ ├── <span class="n">lib1</span><span class="p">.</span><span class="n">js</span>
|
|
397
|
+
│ │ └── <span class="n">lib2</span><span class="p">.</span><span class="n">js</span>
|
|
398
|
+
│ └── <span class="n">stylesheets</span>
|
|
399
|
+
│ ├── <span class="n">lib1</span><span class="p">.</span><span class="n">css</span>
|
|
400
|
+
│ └── <span class="n">lib2</span><span class="p">.</span><span class="n">css</span>
|
|
401
|
+
└── <span class="n">vendor</span>
|
|
402
|
+
├── <span class="n">javascripts</span>
|
|
403
|
+
│ ├── <span class="n">vendor1</span><span class="p">.</span><span class="n">js</span>
|
|
404
|
+
│ └── <span class="n">vendor2</span><span class="p">.</span><span class="n">js</span>
|
|
405
|
+
└── <span class="n">stylesheets</span>
|
|
406
|
+
├── <span class="n">vendor1</span><span class="p">.</span><span class="n">css</span>
|
|
407
|
+
└── <span class="n">vendor2</span><span class="p">.</span><span class="n">css</span>
|
|
408
|
+
</pre></div>
|
|
409
|
+
<p>有如下的依赖声明：</p>
|
|
410
|
+
|
|
411
|
+
<p>/vendor/javascripts/vendor1.js</p>
|
|
412
|
+
<div class="highlight"><pre><span class="c1">//= require_vendor vendor2</span>
|
|
413
|
+
</pre></div>
|
|
414
|
+
<p>/lib/javascripts/lib1.js</p>
|
|
415
|
+
<div class="highlight"><pre><span class="c1">//= require_vendor lib2</span>
|
|
416
|
+
</pre></div>
|
|
417
|
+
<p>/app/javascripts/application.js</p>
|
|
418
|
+
<div class="highlight"><pre><span class="cm">/**</span>
|
|
419
|
+
<span class="cm"> *= require_vendor vendor1</span>
|
|
420
|
+
<span class="cm"> *= require_lib lib1</span>
|
|
421
|
+
<span class="cm"> */</span>
|
|
422
|
+
</pre></div>
|
|
423
|
+
<p>/app/javascripts/bar/show.js</p>
|
|
424
|
+
<div class="highlight"><pre><span class="c1">//= reuquire index/others.js</span>
|
|
425
|
+
</pre></div>
|
|
426
|
+
<p>当访问 <code>bar/show</code>(比如：<code>localhost:3000/bar/show</code>) 时，可以看到在其 <code>html</code> 文件中的 <code>head</code> 有下面的几个 <code>script</code> 自动插入了：</p>
|
|
427
|
+
<div class="highlight"><pre><span class="nt"><script</span> <span class="na">src=</span><span class="s">"vendor2.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
428
|
+
<span class="nt"><script</span> <span class="na">src=</span><span class="s">"vendor1.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
429
|
+
<span class="nt"><script</span> <span class="na">src=</span><span class="s">"lib2.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
430
|
+
<span class="nt"><script</span> <span class="na">src=</span><span class="s">"lib1.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
431
|
+
<span class="nt"><script</span> <span class="na">src=</span><span class="s">"application.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
432
|
+
<span class="nt"><script</span> <span class="na">src=</span><span class="s">"index/others.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
433
|
+
</pre></div>
|
|
434
|
+
<h2>CONVENTIONS/RULES</h2>
|
|
435
|
+
|
|
436
|
+
<p>使用 rake view_assets:init 任务，VA 会在 public 目录中添加下面的文件结构:</p>
|
|
437
|
+
<div class="highlight"><pre><span class="o">|-</span> <span class="n">vendor</span>
|
|
438
|
+
<span class="o">|-</span> <span class="n">javascripts</span>
|
|
439
|
+
<span class="o">|-</span> <span class="n">stylesheets</span>
|
|
440
|
+
<span class="o">|-</span> <span class="n">lib</span>
|
|
441
|
+
<span class="o">|-</span> <span class="n">javascripts</span>
|
|
442
|
+
<span class="o">|-</span> <span class="n">stylesheets</span>
|
|
443
|
+
<span class="o">|-</span> <span class="n">app</span>
|
|
444
|
+
<span class="o">|-</span> <span class="n">javascripts</span>
|
|
445
|
+
<span class="o">|-</span><span class="n">application</span><span class="p">.</span><span class="n">js</span>
|
|
446
|
+
<span class="o">|-</span> <span class="n">stylesheets</span>
|
|
447
|
+
<span class="o">|-</span><span class="n">application</span><span class="p">.</span><span class="n">css</span>
|
|
448
|
+
</pre></div>
|
|
449
|
+
<p>和 rails assets pipeline 相似，它有三种目录存放 js 以及 css 文件。每种类型的含义都和 pipeline 相同。</p>
|
|
450
|
+
<div class="highlight"><pre><span class="n">vendor</span>
|
|
451
|
+
用于存放如 <span class="n">Extjs</span><span class="p">,</span> <span class="n">JQuery</span> 等外部库。
|
|
452
|
+
|
|
453
|
+
<span class="n">lib</span>
|
|
454
|
+
用于存放自己拓展的功能，比如一些拓展于 <span class="n">Extjs</span> 的库或者一些其它公用的拓展功能等。
|
|
455
|
+
|
|
456
|
+
<span class="n">app</span>
|
|
457
|
+
用于存放每个页面需要用到的资源。
|
|
458
|
+
</pre></div>
|
|
459
|
+
<h3>manifest file</h3>
|
|
460
|
+
|
|
461
|
+
<p><strong>NOTE</strong><br>
|
|
462
|
+
下面例子讲述的时候大都直接使用 javascript 当例子，stylesheets 的所有规则几乎和 javascripts 一致。如有不同会单独提示。</p>
|
|
463
|
+
|
|
464
|
+
<p>manifest file 指的是用于声明文件依赖的文件，**只有在这个文件中声明依赖才是有效的**，因为 VA 只会解析 manifest file，并为你关联好依赖。</p>
|
|
465
|
+
|
|
466
|
+
<p>三个不同的目录有各自特点的 manifest file。</p>
|
|
467
|
+
|
|
468
|
+
<h4>In Vendor & Lib</h4>
|
|
469
|
+
|
|
470
|
+
<p>对于 vendor 和 lib 资源，manifest file 可以是如下形式：</p>
|
|
471
|
+
|
|
472
|
+
<p>如果该资源只有一个文件，且直接放置于资源根目录下（即 vendor/javascritps 或者 lib/javascritps），则这个文件本身就是 manifest file，我们可以在文件的头部直接添加其文件依赖。</p>
|
|
473
|
+
|
|
474
|
+
<p>如果该资源有多个文件，且存放于同一个文件夹中，则该文件夹中的 index.js 文件被定义为 manifest file。</p>
|
|
475
|
+
|
|
476
|
+
<p><strong>NOTE</strong><br>
|
|
477
|
+
注意同一个文件夹内的依赖不需要声明，因为 VA 会自动将文件中所有的 assets 文件加载进来。</p>
|
|
478
|
+
|
|
479
|
+
<h4>In App</h4>
|
|
480
|
+
|
|
481
|
+
<p>对于 app 目录，它有两种 manifest file，一种是 controller 级别的，另一种是 action 级别的。</p>
|
|
482
|
+
|
|
483
|
+
<p>对于 controlle 级别的 manifest file，VA 类似 rails 的 views，如果这个 controller 本身存在自己的依赖，即（ 存在这个文件 /app/javascripts/:controller/:controller.js），则不会使用 /app/javascripts/application.js。</p>
|
|
484
|
+
|
|
485
|
+
<p>对于 action，则和 vendor、lib 相似，如果只有一个文件，则 manifest file 为 /app/javascripts/:controller/:action.js，如果该 action 有多个文件，则需要将其组织在以 action 为名的文件夹中，同时在这些中以 index 为名的文件为 manifest file。</p>
|
|
486
|
+
|
|
487
|
+
<p><strong>NOTE</strong> VA 会自动将 <code>/app/javascripts/:controller/:action</code> 中所有的 assets 文件加载进来。</p>
|
|
488
|
+
|
|
489
|
+
<h4>Others</h4>
|
|
490
|
+
|
|
491
|
+
<p>在开发过程中并不一定要使用 manifest file，要注意的是如果有特别依赖要声明的时候，要声明于该文件中，这样 VA 才能正确的为你关联好依赖。</p>
|
|
492
|
+
|
|
493
|
+
<h2>DIRECTIVE</h2>
|
|
494
|
+
|
|
495
|
+
<p>同样，VA 也可以在文件中声明依赖，声明的规则基本业余 pipeline 相似。js 中支持三种声明方式，css 中支持两种。</p>
|
|
496
|
+
<div class="highlight"><pre><span class="k">for</span> <span class="n">javascript</span>
|
|
497
|
+
<span class="n">double</span><span class="o">-</span><span class="n">slash</span> <span class="n">syntax</span> <span class="p">=</span><span class="o">></span> "<span class="o">//</span><span class="p">=</span> <span class="n">require_vendor</span> <span class="n">xxx</span>"
|
|
498
|
+
<span class="n">space</span><span class="o">-</span><span class="n">asterisk</span> <span class="n">syntax</span> <span class="p">=</span><span class="o">></span> " <span class="o">*</span><span class="p">=</span> <span class="n">require_vendor</span> <span class="n">xxx</span>"
|
|
499
|
+
<span class="n">slash</span><span class="o">-</span><span class="n">asterisk</span> <span class="n">syntax</span> <span class="p">=</span><span class="o">></span> "<span class="o">/*</span><span class="p">=</span> <span class="n">require_vendor</span> <span class="n">xxx</span> <span class="o">*/</span>"
|
|
500
|
+
|
|
501
|
+
<span class="k">for</span> <span class="n">stylesheets</span>
|
|
502
|
+
<span class="n">space</span><span class="o">-</span><span class="n">asterisk</span> <span class="n">syntax</span> <span class="p">=</span><span class="o">></span> " <span class="o">*</span><span class="p">=</span> <span class="n">require_vendor</span> <span class="n">xxx</span>"
|
|
503
|
+
<span class="n">slash</span><span class="o">-</span><span class="n">asterisk</span> <span class="n">syntax</span> <span class="p">=</span><span class="o">></span> "<span class="o">/*</span><span class="p">=</span> <span class="n">require_vendor</span> <span class="n">xxx</span> <span class="o">*/</span>"
|
|
504
|
+
</pre></div>
|
|
505
|
+
<p>上面列出的三种声明方式，而声明指令也有三个，分别是：</p>
|
|
506
|
+
|
|
507
|
+
<ul>
|
|
508
|
+
<li><code>require_vendor</code> 会在 vendor 文件夹中寻找目的资源<br></li>
|
|
509
|
+
<li><code>require_lib</code> 会在 lib 文件夹中寻找目的资源<br></li>
|
|
510
|
+
<li><code>require</code> 会在 app 文件夹中寻找目的资源<br></li>
|
|
511
|
+
</ul>
|
|
512
|
+
|
|
513
|
+
<p>对于 <code>require</code> 指令，AV 主要提供的是对同一个 controller 下和不同 controller 下的资源进行加载，这些文件都不会被视为 manifest file，所以不会对其进行解析。</p>
|
|
514
|
+
|
|
515
|
+
<p>加载同一个 controller 的资源时，参数不要包含 controller 名字以及不能以 <code>/</code> 开头，任何以 <code>/</code> 开头的参数在 <code>require</code> 中会视为加载其他 controller 文件。</p>
|
|
516
|
+
|
|
517
|
+
<p><code>require path/to/file</code></p>
|
|
518
|
+
|
|
519
|
+
<p>加载不同 controller 的资源时</p>
|
|
520
|
+
|
|
521
|
+
<p><code>require /other_controller/path/to/file</code></p>
|
|
522
|
+
|
|
523
|
+
<h2>Arguments/Path</h2>
|
|
524
|
+
|
|
525
|
+
<p>在 Directive 后跟着的依赖的参数。如：</p>
|
|
526
|
+
<div class="highlight"><pre><span class="cm">/**</span>
|
|
527
|
+
<span class="cm"> * require_vendor vendor1, vendor2 => <script src="/vendor/javascripts/vendor1.js" type="text/javascript"></script></span>
|
|
528
|
+
<span class="cm"> * <script src="/vendor/javascripts/vendor2.js" type="text/javascript"></script></span>
|
|
529
|
+
<span class="cm"> *</span>
|
|
530
|
+
<span class="cm"> * require_lib lib1 => <script src="/lib/javascripts/lib1.js" type="text/javascript"></script></span>
|
|
531
|
+
<span class="cm"> * require_lib lib2 => <script src="/lib/javascripts/lib2.js" type="text/javascript"></script></span>
|
|
532
|
+
<span class="cm"> * require /other_controller/path/to/file => <script src="/app/javascripts/other_controller/path/to/tile.js" type="text/javascript"></script></span>
|
|
533
|
+
<span class="cm"> */</span>
|
|
534
|
+
</pre></div>
|
|
535
|
+
<h2>USAGE</h2>
|
|
536
|
+
|
|
537
|
+
<p>在 Gemfile 中添加下面的代码：</p>
|
|
538
|
+
|
|
539
|
+
<p><code>gem 'view_assets'</code></p>
|
|
540
|
+
|
|
541
|
+
<p>接下来，需要在 <code>/app/helpers/application_helper.rb</code> include <code>ViewAssets</code>。</p>
|
|
542
|
+
<div class="highlight"><pre><span class="k">module</span> <span class="nn">ApplicationHelper</span>
|
|
543
|
+
<span class="kp">include</span> <span class="no">ViewAssets</span>
|
|
544
|
+
<span class="k">end</span>
|
|
545
|
+
</pre></div>
|
|
546
|
+
<p>在你的 <code>/app/views/layouts/application.html.rb</code> 文件中需要添加下面代码：</p>
|
|
547
|
+
<div class="highlight"><pre><span class="o"><%=</span> <span class="n">include_assets_with_assets_mvc</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:controller</span><span class="o">]</span><span class="p">,</span> <span class="n">params</span><span class="o">[</span><span class="ss">:action</span><span class="o">]</span><span class="p">)</span> <span class="o">%></span>
|
|
548
|
+
</pre></div>
|
|
549
|
+
<p>如果你的 controller 使用了自己的 layout 的话，则需要将在 <code>app/views/layouts/application.html.rb</code> 添加的代码也添加进去。</p>
|
|
550
|
+
|
|
551
|
+
<h2>OTHERS</h2>
|
|
552
|
+
|
|
553
|
+
<p>虽然这个 gem 有一定的方便性，但毕竟这是个简单的设计，目前支持简单的依赖管理，并不是个像 assets pipeline 一样十分成熟的程序。目前它还不支持许多 assets pipeline 实现的事情，比如在 production 模式下自动将所有 assets 压缩成一个文件等。</p>
|
|
554
|
+
|
|
555
|
+
<p>This project rocks and uses MIT-LICENSE.</p>
|
|
556
|
+
|
|
557
|
+
|
|
558
|
+
<div style="float:right;margin-top:20px;margin-bottom:20px !important">© Wando Studio. All rights reserved.</div>
|
|
559
|
+
</body>
|
|
560
|
+
</html>
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: markdown_to_html
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.3
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -52,6 +52,7 @@ extensions: []
|
|
|
52
52
|
extra_rdoc_files: []
|
|
53
53
|
files:
|
|
54
54
|
- .gitignore
|
|
55
|
+
- .rvmrc
|
|
55
56
|
- Gemfile
|
|
56
57
|
- LICENSE.txt
|
|
57
58
|
- README.md
|
|
@@ -62,6 +63,7 @@ files:
|
|
|
62
63
|
- lib/markdown_to_html/version.rb
|
|
63
64
|
- markdown_to_html.gemspec
|
|
64
65
|
- test/github.css
|
|
66
|
+
- test/index.html
|
|
65
67
|
- test/index.md
|
|
66
68
|
- test/test.rb
|
|
67
69
|
homepage: ''
|
|
@@ -93,5 +95,6 @@ summary: With the funtionality of rendering github flavored markdown file into a
|
|
|
93
95
|
rendered html document an enjoyment.
|
|
94
96
|
test_files:
|
|
95
97
|
- test/github.css
|
|
98
|
+
- test/index.html
|
|
96
99
|
- test/index.md
|
|
97
100
|
- test/test.rb
|