qiita-markdown 0.44.1 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/test.yml +2 -2
- data/.rubocop.yml +0 -4
- data/.rubocop_todo.yml +6 -44
- data/CHANGELOG.md +10 -0
- data/README.md +3 -1
- data/lib/qiita/markdown/filters/checkbox.rb +5 -1
- data/lib/qiita/markdown/filters/custom_block.rb +7 -6
- data/lib/qiita/markdown/filters/final_sanitizer.rb +8 -2
- data/lib/qiita/markdown/filters/heading_anchor.rb +44 -0
- data/lib/qiita/markdown/filters/html_toc.rb +67 -0
- data/lib/qiita/markdown/filters/qiita_marker.rb +55 -0
- data/lib/qiita/markdown/filters/user_input_sanitizer.rb +14 -9
- data/lib/qiita/markdown/processor.rb +2 -1
- data/lib/qiita/markdown/summary_processor.rb +1 -1
- data/lib/qiita/markdown/version.rb +1 -1
- data/lib/qiita/markdown.rb +4 -5
- data/qiita-markdown.gemspec +2 -3
- data/spec/qiita/markdown/filters/checkbox_spec.rb +28 -0
- data/spec/qiita/markdown/filters/heading_anchor_spec.rb +73 -0
- data/spec/qiita/markdown/filters/html_toc_spec.rb +223 -0
- data/spec/qiita/markdown/filters/qiita_marker_spec.rb +60 -0
- data/spec/qiita/markdown/processor_spec.rb +48 -54
- data/spec/qiita/markdown/summary_processor_spec.rb +2 -2
- metadata +23 -39
- data/benchmark/heading_anchor_rendering.rb +0 -248
- data/benchmark/sample.md +0 -317
- data/lib/qiita/markdown/filters/greenmat.rb +0 -38
- data/lib/qiita/markdown/greenmat/heading_rendering.rb +0 -61
- data/lib/qiita/markdown/greenmat/html_renderer.rb +0 -60
- data/lib/qiita/markdown/greenmat/html_toc_renderer.rb +0 -78
- data/spec/qiita/markdown/filters/greenmat_spec.rb +0 -15
- data/spec/qiita/markdown/greenmat/html_toc_renderer_spec.rb +0 -156
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: qiita-markdown
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ryo Nakamura
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-11-
|
11
|
+
date: 2022-11-21 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: addressable
|
@@ -52,20 +52,6 @@ dependencies:
|
|
52
52
|
- - "~>"
|
53
53
|
- !ruby/object:Gem::Version
|
54
54
|
version: '4.0'
|
55
|
-
- !ruby/object:Gem::Dependency
|
56
|
-
name: greenmat
|
57
|
-
requirement: !ruby/object:Gem::Requirement
|
58
|
-
requirements:
|
59
|
-
- - '='
|
60
|
-
- !ruby/object:Gem::Version
|
61
|
-
version: 3.5.1.4
|
62
|
-
type: :runtime
|
63
|
-
prerelease: false
|
64
|
-
version_requirements: !ruby/object:Gem::Requirement
|
65
|
-
requirements:
|
66
|
-
- - '='
|
67
|
-
- !ruby/object:Gem::Version
|
68
|
-
version: 3.5.1.4
|
69
55
|
- !ruby/object:Gem::Dependency
|
70
56
|
name: html-pipeline
|
71
57
|
requirement: !ruby/object:Gem::Requirement
|
@@ -136,20 +122,6 @@ dependencies:
|
|
136
122
|
- - "~>"
|
137
123
|
- !ruby/object:Gem::Version
|
138
124
|
version: 5.2.7
|
139
|
-
- !ruby/object:Gem::Dependency
|
140
|
-
name: benchmark-ips
|
141
|
-
requirement: !ruby/object:Gem::Requirement
|
142
|
-
requirements:
|
143
|
-
- - "~>"
|
144
|
-
- !ruby/object:Gem::Version
|
145
|
-
version: '1.2'
|
146
|
-
type: :development
|
147
|
-
prerelease: false
|
148
|
-
version_requirements: !ruby/object:Gem::Requirement
|
149
|
-
requirements:
|
150
|
-
- - "~>"
|
151
|
-
- !ruby/object:Gem::Version
|
152
|
-
version: '1.2'
|
153
125
|
- !ruby/object:Gem::Dependency
|
154
126
|
name: bundler
|
155
127
|
requirement: !ruby/object:Gem::Requirement
|
@@ -192,6 +164,20 @@ dependencies:
|
|
192
164
|
- - ">="
|
193
165
|
- !ruby/object:Gem::Version
|
194
166
|
version: '0'
|
167
|
+
- !ruby/object:Gem::Dependency
|
168
|
+
name: qiita_marker
|
169
|
+
requirement: !ruby/object:Gem::Requirement
|
170
|
+
requirements:
|
171
|
+
- - "~>"
|
172
|
+
- !ruby/object:Gem::Version
|
173
|
+
version: 0.23.6
|
174
|
+
type: :development
|
175
|
+
prerelease: false
|
176
|
+
version_requirements: !ruby/object:Gem::Requirement
|
177
|
+
requirements:
|
178
|
+
- - "~>"
|
179
|
+
- !ruby/object:Gem::Version
|
180
|
+
version: 0.23.6
|
195
181
|
- !ruby/object:Gem::Dependency
|
196
182
|
name: rake
|
197
183
|
requirement: !ruby/object:Gem::Requirement
|
@@ -307,8 +293,6 @@ files:
|
|
307
293
|
- LICENSE.txt
|
308
294
|
- README.md
|
309
295
|
- Rakefile
|
310
|
-
- benchmark/heading_anchor_rendering.rb
|
311
|
-
- benchmark/sample.md
|
312
296
|
- lib/qiita-markdown.rb
|
313
297
|
- lib/qiita/markdown.rb
|
314
298
|
- lib/qiita/markdown/base_processor.rb
|
@@ -328,19 +312,18 @@ files:
|
|
328
312
|
- lib/qiita/markdown/filters/external_link.rb
|
329
313
|
- lib/qiita/markdown/filters/final_sanitizer.rb
|
330
314
|
- lib/qiita/markdown/filters/footnote.rb
|
331
|
-
- lib/qiita/markdown/filters/greenmat.rb
|
332
315
|
- lib/qiita/markdown/filters/group_mention.rb
|
316
|
+
- lib/qiita/markdown/filters/heading_anchor.rb
|
317
|
+
- lib/qiita/markdown/filters/html_toc.rb
|
333
318
|
- lib/qiita/markdown/filters/image_link.rb
|
334
319
|
- lib/qiita/markdown/filters/inline_code_color.rb
|
335
320
|
- lib/qiita/markdown/filters/mention.rb
|
321
|
+
- lib/qiita/markdown/filters/qiita_marker.rb
|
336
322
|
- lib/qiita/markdown/filters/simplify.rb
|
337
323
|
- lib/qiita/markdown/filters/syntax_highlight.rb
|
338
324
|
- lib/qiita/markdown/filters/toc.rb
|
339
325
|
- lib/qiita/markdown/filters/truncate.rb
|
340
326
|
- lib/qiita/markdown/filters/user_input_sanitizer.rb
|
341
|
-
- lib/qiita/markdown/greenmat/heading_rendering.rb
|
342
|
-
- lib/qiita/markdown/greenmat/html_renderer.rb
|
343
|
-
- lib/qiita/markdown/greenmat/html_toc_renderer.rb
|
344
327
|
- lib/qiita/markdown/processor.rb
|
345
328
|
- lib/qiita/markdown/summary_processor.rb
|
346
329
|
- lib/qiita/markdown/transformers/filter_attributes.rb
|
@@ -350,9 +333,10 @@ files:
|
|
350
333
|
- lib/qiita/markdown/version.rb
|
351
334
|
- qiita-markdown.gemspec
|
352
335
|
- spec/qiita/markdown/filters/checkbox_spec.rb
|
353
|
-
- spec/qiita/markdown/filters/
|
336
|
+
- spec/qiita/markdown/filters/heading_anchor_spec.rb
|
337
|
+
- spec/qiita/markdown/filters/html_toc_spec.rb
|
354
338
|
- spec/qiita/markdown/filters/inline_code_color_spec.rb
|
355
|
-
- spec/qiita/markdown/
|
339
|
+
- spec/qiita/markdown/filters/qiita_marker_spec.rb
|
356
340
|
- spec/qiita/markdown/processor_spec.rb
|
357
341
|
- spec/qiita/markdown/summary_processor_spec.rb
|
358
342
|
- spec/spec_helper.rb
|
@@ -369,7 +353,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
369
353
|
requirements:
|
370
354
|
- - ">="
|
371
355
|
- !ruby/object:Gem::Version
|
372
|
-
version: 2.
|
356
|
+
version: 2.7.0
|
373
357
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
374
358
|
requirements:
|
375
359
|
- - ">="
|
@@ -1,248 +0,0 @@
|
|
1
|
-
require "benchmark/ips"
|
2
|
-
require "qiita/markdown"
|
3
|
-
|
4
|
-
# The old implementation
|
5
|
-
module PostProcess
|
6
|
-
class Processor < Qiita::Markdown::Processor
|
7
|
-
def filters
|
8
|
-
@filters ||= [
|
9
|
-
Filters::Greenmat,
|
10
|
-
Filters::Toc,
|
11
|
-
]
|
12
|
-
end
|
13
|
-
end
|
14
|
-
|
15
|
-
module Filters
|
16
|
-
class Greenmat < HTML::Pipeline::TextFilter
|
17
|
-
class << self
|
18
|
-
# Memoize.
|
19
|
-
# @return [Greenmat::Markdown]
|
20
|
-
def renderer
|
21
|
-
@renderer ||= ::Greenmat::Markdown.new(
|
22
|
-
::Greenmat::Render::HTML.new(
|
23
|
-
hard_wrap: true,
|
24
|
-
),
|
25
|
-
autolink: true,
|
26
|
-
fenced_code_blocks: true,
|
27
|
-
footnotes: true,
|
28
|
-
no_intra_emphasis: true,
|
29
|
-
no_mention_emphasis: true,
|
30
|
-
strikethrough: true,
|
31
|
-
tables: true,
|
32
|
-
)
|
33
|
-
end
|
34
|
-
end
|
35
|
-
|
36
|
-
# @return [Nokogiri::HTML::DocumentFragment]
|
37
|
-
def call
|
38
|
-
Nokogiri::HTML.fragment(self.class.renderer.render(@text))
|
39
|
-
end
|
40
|
-
end
|
41
|
-
|
42
|
-
class Toc < HTML::Pipeline::Filter
|
43
|
-
def call
|
44
|
-
counter = Hash.new(0)
|
45
|
-
doc.css("h1, h2, h3, h4, h5, h6").each do |node|
|
46
|
-
heading = Heading.new(node, counter)
|
47
|
-
heading.add_anchor_element if heading.has_first_child?
|
48
|
-
heading.increment
|
49
|
-
end
|
50
|
-
doc
|
51
|
-
end
|
52
|
-
|
53
|
-
class Heading
|
54
|
-
def initialize(node, counter)
|
55
|
-
@node = node
|
56
|
-
@counter = counter
|
57
|
-
end
|
58
|
-
|
59
|
-
def add_anchor_element
|
60
|
-
first_child.add_previous_sibling(anchor_element)
|
61
|
-
end
|
62
|
-
|
63
|
-
def anchor_element
|
64
|
-
%(<span id="#{suffixed_id}" class="fragment"></span><a href="##{suffixed_id}"><i class="fa fa-link"></i></a>)
|
65
|
-
end
|
66
|
-
|
67
|
-
def content
|
68
|
-
@content ||= node.children.first
|
69
|
-
end
|
70
|
-
|
71
|
-
def count
|
72
|
-
@counter[id]
|
73
|
-
end
|
74
|
-
|
75
|
-
def first_child
|
76
|
-
@first_child ||= @node.children.first
|
77
|
-
end
|
78
|
-
|
79
|
-
def has_count?
|
80
|
-
count > 0
|
81
|
-
end
|
82
|
-
|
83
|
-
def has_first_child?
|
84
|
-
!!first_child
|
85
|
-
end
|
86
|
-
|
87
|
-
def id
|
88
|
-
@node.text.downcase.gsub(/[^\p{Word}\- ]/u, "").tr(" ", "-")
|
89
|
-
end
|
90
|
-
|
91
|
-
def increment
|
92
|
-
@counter[id] += 1
|
93
|
-
end
|
94
|
-
|
95
|
-
def suffix
|
96
|
-
has_count? ? "-#{count}" : ""
|
97
|
-
end
|
98
|
-
|
99
|
-
def suffixed_id
|
100
|
-
"#{id}#{suffix}"
|
101
|
-
end
|
102
|
-
end
|
103
|
-
end
|
104
|
-
end
|
105
|
-
end
|
106
|
-
|
107
|
-
# The new implementation
|
108
|
-
module Rendering
|
109
|
-
class Processor < Qiita::Markdown::Processor
|
110
|
-
def filters
|
111
|
-
@filters ||= [
|
112
|
-
Filters::Greenmat,
|
113
|
-
]
|
114
|
-
end
|
115
|
-
end
|
116
|
-
|
117
|
-
module Filters
|
118
|
-
class Greenmat < HTML::Pipeline::TextFilter
|
119
|
-
def call
|
120
|
-
Nokogiri::HTML.fragment(greenmat.render(@text))
|
121
|
-
end
|
122
|
-
|
123
|
-
private
|
124
|
-
|
125
|
-
# Memoize.
|
126
|
-
# @return [Greenmat::Markdown]
|
127
|
-
def greenmat
|
128
|
-
@renderer ||= ::Greenmat::Markdown.new(
|
129
|
-
HTMLRenderer.new(hard_wrap: true, with_toc_data: true),
|
130
|
-
autolink: true,
|
131
|
-
fenced_code_blocks: true,
|
132
|
-
footnotes: true,
|
133
|
-
no_intra_emphasis: true,
|
134
|
-
no_mention_emphasis: true,
|
135
|
-
strikethrough: true,
|
136
|
-
tables: true,
|
137
|
-
)
|
138
|
-
end
|
139
|
-
|
140
|
-
class HTMLRenderer < ::Greenmat::Render::HTML
|
141
|
-
def initialize(extensions = {})
|
142
|
-
super
|
143
|
-
@with_toc_data = extensions[:with_toc_data]
|
144
|
-
end
|
145
|
-
|
146
|
-
def header(text, level)
|
147
|
-
heading = heading_class.new(text, level, counter)
|
148
|
-
heading.to_s.tap do
|
149
|
-
heading.increment
|
150
|
-
end
|
151
|
-
end
|
152
|
-
|
153
|
-
private
|
154
|
-
|
155
|
-
def heading_class
|
156
|
-
@heading_class ||= (@with_toc_data ? HeadingWithAnchor : Heading)
|
157
|
-
end
|
158
|
-
|
159
|
-
def counter
|
160
|
-
@counter ||= Hash.new(0)
|
161
|
-
end
|
162
|
-
|
163
|
-
Heading = Struct.new(:body, :level, :counter) do
|
164
|
-
# For reference, C implementation of Redcarpet::Render::HTML#header is the following:
|
165
|
-
# https://github.com/vmg/redcarpet/blob/v3.2.3/ext/redcarpet/html.c#L281-L296
|
166
|
-
def to_s
|
167
|
-
"\n<h#{level}>#{body}</h#{level}>\n"
|
168
|
-
end
|
169
|
-
|
170
|
-
def increment
|
171
|
-
# no-op
|
172
|
-
end
|
173
|
-
|
174
|
-
private
|
175
|
-
|
176
|
-
def content
|
177
|
-
body
|
178
|
-
end
|
179
|
-
end
|
180
|
-
|
181
|
-
class HeadingWithAnchor < Heading
|
182
|
-
def to_s
|
183
|
-
"\n<h#{level}>#{anchor_element}#{body}</h#{level}>\n"
|
184
|
-
end
|
185
|
-
|
186
|
-
def increment
|
187
|
-
counter[id] += 1
|
188
|
-
end
|
189
|
-
|
190
|
-
private
|
191
|
-
|
192
|
-
def anchor_element
|
193
|
-
%(<span id="#{suffixed_id}" class="fragment"></span><a href="##{suffixed_id}"><i class="fa fa-link"></i></a>)
|
194
|
-
end
|
195
|
-
|
196
|
-
def count
|
197
|
-
counter[id]
|
198
|
-
end
|
199
|
-
|
200
|
-
def has_count?
|
201
|
-
count > 0
|
202
|
-
end
|
203
|
-
|
204
|
-
def id
|
205
|
-
@id ||= text.downcase.gsub(/[^\p{Word}\- ]/u, "").tr(" ", "-")
|
206
|
-
end
|
207
|
-
|
208
|
-
def text
|
209
|
-
Nokogiri::HTML.fragment(body).text
|
210
|
-
end
|
211
|
-
|
212
|
-
def suffix
|
213
|
-
has_count? ? "-#{count}" : ""
|
214
|
-
end
|
215
|
-
|
216
|
-
def suffixed_id
|
217
|
-
@suffixed_id ||= "#{id}#{suffix}"
|
218
|
-
end
|
219
|
-
end
|
220
|
-
end
|
221
|
-
end
|
222
|
-
end
|
223
|
-
end
|
224
|
-
|
225
|
-
markdown = File.read(File.join(File.dirname(__FILE__), "sample.md"))
|
226
|
-
|
227
|
-
Benchmark.ips do |benchmark|
|
228
|
-
benchmark.report("post process") do
|
229
|
-
PostProcess::Processor.new.call(markdown)
|
230
|
-
end
|
231
|
-
|
232
|
-
benchmark.report("rendering") do
|
233
|
-
Rendering::Processor.new.call(markdown)
|
234
|
-
end
|
235
|
-
|
236
|
-
benchmark.compare!
|
237
|
-
end
|
238
|
-
|
239
|
-
# Calculating -------------------------------------
|
240
|
-
# post process 4 i/100ms
|
241
|
-
# rendering 14 i/100ms
|
242
|
-
# -------------------------------------------------
|
243
|
-
# post process 44.9 (±13.4%) i/s - 224 in 5.066301s
|
244
|
-
# rendering 151.1 (±16.5%) i/s - 742 in 5.057789s
|
245
|
-
#
|
246
|
-
# Comparison:
|
247
|
-
# rendering: 151.1 i/s
|
248
|
-
# post process: 44.9 i/s - 3.36x slower
|
data/benchmark/sample.md
DELETED
@@ -1,317 +0,0 @@
|
|
1
|
-
Markdown記法 チートシート
|
2
|
-
Markdown記法のチートシートです。
|
3
|
-
本ページではQiitaで使用可能なMarkdownのみ掲載しているため、一部原文と異なります。
|
4
|
-
Markdownの原文については、[Daring Fireball: Markdown Syntax Documentation]
|
5
|
-
(http://daringfireball.net/projects/markdown/syntax.php)をご覧下さい。
|
6
|
-
また、コードに関する記法は[GitHub Flavored Markdown](http://github.github.com/github-flavored-markdown/)に準拠しています。
|
7
|
-
Qiitaでシンタックスハイライト可能な言語一覧については、 [シンタックスハイライト可能な言語](http://qiita.com/Qiita/items/e84f5aad7757afce82ba) をご覧下さい。
|
8
|
-
|
9
|
-
## Code - コードの挿入
|
10
|
-
|
11
|
-
たとえば、Rubyで記述したコードをファイル名「qiita.rb」として投稿したいときは、 **バッククオート** を使用して以下のように投稿するとシンタックスハイライトが適用されます。
|
12
|
-
**コードブロック上下に空行を挿入しないと正しく表示されないことがあります。**
|
13
|
-
|
14
|
-
> (空行)
|
15
|
-
> \`\`\`ruby:qiita.rb
|
16
|
-
> puts 'The best way to log and share programmers knowledge.'
|
17
|
-
> \`\`\`
|
18
|
-
> (空行)
|
19
|
-
|
20
|
-
**結果**
|
21
|
-
|
22
|
-
```ruby:qiita.rb
|
23
|
-
puts 'The best way to log and share programmers knowledge.'
|
24
|
-
```
|
25
|
-
|
26
|
-
また、コードをインライン表示することも可能です。
|
27
|
-
|
28
|
-
> \` puts 'Qiita'` はプログラマのための技術情報共有サービスです。
|
29
|
-
|
30
|
-
**結果**
|
31
|
-
|
32
|
-
` puts 'Qiita'` はプログラマのための技術情報共有サービスです。
|
33
|
-
|
34
|
-
インラインコードがn個連続するバッククオートを含む場合、n+1連続のバッククオートで囲みます。
|
35
|
-
|
36
|
-
> \`\` \`バッククオート\` \`\` や \`\`\` \`\`2連続バッククオート\`\` \`\`\` も記述できます。
|
37
|
-
|
38
|
-
**結果**
|
39
|
-
|
40
|
-
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。
|
41
|
-
|
42
|
-
### Gist連携について
|
43
|
-
|
44
|
-
##### GitHubアカウントでQiitaにログインされている場合
|
45
|
-
|
46
|
-
投稿時、Octocatアイコンにチェックを入れていただくと連携を行います。
|
47
|
-
コードを含むアイテムを投稿するとコード部分を抽出し、同じ内容がGistにも投稿される仕組みになっています。
|
48
|
-
|
49
|
-
Gistとの連携は、
|
50
|
-
|
51
|
-
* コードの投稿
|
52
|
-
* Qiita側でのコードの編集
|
53
|
-
|
54
|
-
の2点について連携しています。
|
55
|
-
Gist側でコードを編集されても、 **Qiitaには反映されません** のでご注意下さい。
|
56
|
-
|
57
|
-
## Format Text - テキストの装飾
|
58
|
-
|
59
|
-
### Headers - 見出し
|
60
|
-
|
61
|
-
* \# これはH1タグです
|
62
|
-
* \## これはH2タグです
|
63
|
-
* \###### これはH6タグです
|
64
|
-
|
65
|
-
### Emphasis - 強調
|
66
|
-
|
67
|
-
```markdown
|
68
|
-
_イタリック体_を使うには _ か * で囲みます。
|
69
|
-
**太字**を使うには __ か ** で囲みます。
|
70
|
-
```
|
71
|
-
|
72
|
-
_イタリック体_を使うには _ か * で囲みます。
|
73
|
-
**太字**を使うには __ か ** で囲みます。
|
74
|
-
|
75
|
-
### Strikethrough - 打ち消し線
|
76
|
-
|
77
|
-
```markdown
|
78
|
-
打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~
|
79
|
-
```
|
80
|
-
|
81
|
-
打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~
|
82
|
-
|
83
|
-
イタリックや太文字と同様に前後に **半角スペース** か **改行文字** が必要です。
|
84
|
-
|
85
|
-
## Lists - リスト
|
86
|
-
|
87
|
-
### Disc型
|
88
|
-
|
89
|
-
* 文頭に「*」「+」「-」のいずれかを入れるとDisc型リストになります
|
90
|
-
* 要点をまとめる際に便利です
|
91
|
-
* リストを挿入する際は、 **リストの上下に空行がないと正しく表示されません。また「*」「+」「-」の後にはスペースが必要です**
|
92
|
-
|
93
|
-
### Decimal型
|
94
|
-
|
95
|
-
1. 文頭に「数字.」を入れるとDecimal型リストになります
|
96
|
-
2. 後からの挿入/移動を考慮して、1. 2. 3. と順番にするのではなく、1. 1. 1. という風に同じ数字にしておくといい具合です。
|
97
|
-
3. リストを挿入する際は、 **リストの上下に空行がないと正しく表示されません。また「数字.」の後にはスペースが必要です**
|
98
|
-
|
99
|
-
### Definition型
|
100
|
-
|
101
|
-
HTMLの`<dl>`タグをそのまま使うことで実現できます。
|
102
|
-
|
103
|
-
```html
|
104
|
-
<dl>
|
105
|
-
<dt>リンゴ</dt>
|
106
|
-
<dd>赤いフルーツ</dd>
|
107
|
-
<dt>オレンジ</dt>
|
108
|
-
<dd>橙色のフルーツ</dd>
|
109
|
-
</dl>
|
110
|
-
```
|
111
|
-
次のようになります。
|
112
|
-
|
113
|
-
<dl>
|
114
|
-
<dt>リンゴ</dt>
|
115
|
-
<dd>赤いフルーツ</dd>
|
116
|
-
<dt>オレンジ</dt>
|
117
|
-
<dd>橙色フルーツ</dd>
|
118
|
-
</dl>
|
119
|
-
|
120
|
-
注意するべきは、Definition型のリスト内ではMarkdown記法が使えないということです。例えば以下のように書いてはなりません。
|
121
|
-
|
122
|
-
```html
|
123
|
-
<dl>
|
124
|
-
<dt>リンゴ</dt>
|
125
|
-
<dd> とても **赤い** フルーツ </dd>
|
126
|
-
</dl>
|
127
|
-
```
|
128
|
-
|
129
|
-
次のようになってしまいます。
|
130
|
-
|
131
|
-
<dl>
|
132
|
-
<dt>リンゴ</dt>
|
133
|
-
<dd> とても **赤い** フルーツ </dd>
|
134
|
-
</dl>
|
135
|
-
|
136
|
-
Definition型リスト内ではMarkdown記法ではなくて、HTMLタグを使って修飾しなければならないので、正しくは次のようになります。
|
137
|
-
|
138
|
-
```html
|
139
|
-
<dl>
|
140
|
-
<dt>リンゴ</dt>
|
141
|
-
<dd> とても<strong>赤い</strong>フルーツ </dd>
|
142
|
-
</dl>
|
143
|
-
```
|
144
|
-
|
145
|
-
<dl>
|
146
|
-
<dt>リンゴ</dt>
|
147
|
-
<dd> とても<strong>赤い</strong>フルーツ</dd>
|
148
|
-
</dl>
|
149
|
-
|
150
|
-
Markdown記法とHTMLタグの対応は次のようになっています。
|
151
|
-
|
152
|
-
| 修飾 | Markdown | HTML |
|
153
|
-
|:----------:|:---------------:|:------------------------:|
|
154
|
-
| ボールド | `** **` | `<strong></strong>` |
|
155
|
-
| イタリック | `_ _` | `<em></em>` |
|
156
|
-
| コード | <code>``</code> | `<code></code>` |
|
157
|
-
| リンク | `[text](url)` | `<a href="url">text</a>` |
|
158
|
-
|
159
|
-
## Blockquotes - 引用
|
160
|
-
|
161
|
-
> \> 文頭に>を置くことで引用になります。
|
162
|
-
> \> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
|
163
|
-
> \> **引用の上下にはリストと同じく空行がないと正しく表示されません**
|
164
|
-
> \> 引用の中に別のMarkdownを使用することも可能です。
|
165
|
-
|
166
|
-
> > これはネストされた引用です。
|
167
|
-
|
168
|
-
## Horizontal rules - 水平線
|
169
|
-
|
170
|
-
下記は全て水平線として表示されます
|
171
|
-
|
172
|
-
> \* * *
|
173
|
-
> \***
|
174
|
-
> \*****
|
175
|
-
> \- - -
|
176
|
-
> \---------------------------------------
|
177
|
-
|
178
|
-
## Links - リンク
|
179
|
-
|
180
|
-
* \[リンクテキスト](URL "タイトル")
|
181
|
-
* タイトル付きのリンクを投稿できます。
|
182
|
-
|
183
|
-
**例**
|
184
|
-
|
185
|
-
> *Markdown:* \[Qiita]\(http://qiita.com "Qiita")
|
186
|
-
> *結果:* [Qiita](http://qiita.com "Qiita")
|
187
|
-
|
188
|
-
* \[リンクテキスト](URL)
|
189
|
-
* こちらはタイトル無しのリンクになります。
|
190
|
-
|
191
|
-
**例**
|
192
|
-
|
193
|
-
> *Markdown:* \[Qiita]\(http://qiita.com)
|
194
|
-
> *結果:* [Qiita](http://qiita.com)
|
195
|
-
|
196
|
-
- \[リンクテキスト]\[名前]
|
197
|
-
- \[名前]:URL
|
198
|
-
- 同じURLへのリンクを複数箇所に設定することができます
|
199
|
-
|
200
|
-
**例**
|
201
|
-
|
202
|
-
>
|
203
|
-
*Markdown:*
|
204
|
-
\[ここ]\[link-1] と \[この]\[link-1] リンクは同じになります。
|
205
|
-
\[link-1][\] も可能です。
|
206
|
-
\[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d
|
207
|
-
>
|
208
|
-
*結果:*
|
209
|
-
[ここ][link-1] と [この][link-1] リンクは同じになります。
|
210
|
-
[link-1][] も可能です。
|
211
|
-
[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d
|
212
|
-
|
213
|
-
## Images - 画像埋め込み
|
214
|
-
|
215
|
-
* \![代替テキスト]\(画像のURL)
|
216
|
-
* タイトル無しの画像を埋め込む
|
217
|
-
* \![代替テキスト]\(画像のURL "画像タイトル")
|
218
|
-
* タイトル有りの画像を埋め込む
|
219
|
-
|
220
|
-
**例**
|
221
|
-
|
222
|
-
> *Markdown:* \![Qiita]\(http://qiita.com/icons/favicons/public/apple-touch-icon.png "Qiita")
|
223
|
-
> *結果:*
|
224
|
-
> ![Qiita](http://qiita.com/icons/favicons/public/apple-touch-icon.png "Qiita")
|
225
|
-
|
226
|
-
## テーブル記法
|
227
|
-
```
|
228
|
-
| Left align | Right align | Center align |
|
229
|
-
|:-----------|------------:|:------------:|
|
230
|
-
| This | This | This |
|
231
|
-
| column | column | column |
|
232
|
-
| will | will | will |
|
233
|
-
| be | be | be |
|
234
|
-
| left | right | center |
|
235
|
-
| aligned | aligned | aligned |
|
236
|
-
```
|
237
|
-
|
238
|
-
上記のように書くと,以下のように表示されます.
|
239
|
-
|
240
|
-
| Left align | Right align | Center align |
|
241
|
-
|:-----------|------------:|:------------:|
|
242
|
-
| This | This | This |
|
243
|
-
| column | column | column |
|
244
|
-
| will | will | will |
|
245
|
-
| be | be | be |
|
246
|
-
| left | right | center |
|
247
|
-
| aligned | aligned | aligned |
|
248
|
-
|
249
|
-
## 数式の挿入
|
250
|
-
|
251
|
-
コードブロックの言語指定に "math" を指定することでTeX記法を用いて数式を記述することができます。
|
252
|
-
|
253
|
-
> \`\`\`math
|
254
|
-
> \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
|
255
|
-
> \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
256
|
-
> \`\`\`
|
257
|
-
|
258
|
-
```math
|
259
|
-
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
|
260
|
-
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
|
261
|
-
```
|
262
|
-
|
263
|
-
`$2^3$` のように数式を "$" で挟むと行中に数式を埋め込むこともできます。
|
264
|
-
|
265
|
-
> x^2 + y^2 = 1 をインライン表示すると $x^2 + y^2 = 1$ になります。
|
266
|
-
|
267
|
-
ただしインライン数式の中でコントロールシンボル(`\{`のような、バックスラッシュの後に記号が続くもの)を使うと、後述のバックスラッシュによるMarkdownのエスケープと衝突してしまいます。
|
268
|
-
|
269
|
-
```
|
270
|
-
$a = \{1, 2, 3\}$
|
271
|
-
```
|
272
|
-
|
273
|
-
> $a = \{1, 2, 3\}$
|
274
|
-
|
275
|
-
なので次のように二つのバックスラッシュを使います。
|
276
|
-
|
277
|
-
```
|
278
|
-
$a = \\{1, 2, 3\\}$
|
279
|
-
```
|
280
|
-
|
281
|
-
> $a = \\{1, 2, 3\\}$
|
282
|
-
|
283
|
-
## 目次(TOC)の自動挿入
|
284
|
-
|
285
|
-
目次は記事内の見出しを元に自動生成し、右上に自動挿入されます。詳細は[目次機能の紹介記事](http://blog.qiita.com/post/77055935852/qiita-toc)をご覧ください。
|
286
|
-
|
287
|
-
## 注釈
|
288
|
-
本文中に `[^1]` のように文字列を記述することで、脚注へのリンクを表現できます。注釈内容は、同じく本文中に `[^1]: ...` というように記述します[^1]。
|
289
|
-
|
290
|
-
[^1]: 注釈内容を記述する位置は、本文の途中でも末尾でも構いません。
|
291
|
-
|
292
|
-
## 絵文字
|
293
|
-
厳密には Markdown 記法の外ですが、`:` で囲って、絵文字を埋め込めます。
|
294
|
-
|
295
|
-
**例**
|
296
|
-
|
297
|
-
```
|
298
|
-
\:kissing_closed_eyes: chu☆
|
299
|
-
```
|
300
|
-
|
301
|
-
> \:kissing_closed_eyes: chu☆
|
302
|
-
|
303
|
-
|
304
|
-
絵文字チートシート
|
305
|
-
http://www.emoji-cheat-sheet.com/
|
306
|
-
|
307
|
-
|
308
|
-
## その他
|
309
|
-
|
310
|
-
バックスラッシュ[\\]をMarkdownの前に挿入することで、Markdownをエスケープ(無効化)することができます。
|
311
|
-
|
312
|
-
**例**
|
313
|
-
|
314
|
-
> \# H1
|
315
|
-
> エスケープされています
|
316
|
-
|
317
|
-
また本文では一部のHTMLタグも利用可能です。
|