markdown_to_html 0.0.2 → 0.0.3
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.
- 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
|