- セキュリティに注意!! 不特定多数が投稿できる場面で、マークダウン機能を導入と、XSS攻撃のリスク。マークダウンでの投稿画面は、権限保持者に限定するべきみたい。。
- マークダウン形式のgemは、redcarpet、言語での記述（シンタックスハイライト）は、coderayを使用。
Gemfile
gem 'redcarpet', '~> 2.3.0' # マークダウン形式での表示
gem 'coderay' # シンタックスハイライト対応
- 流れは、 ヘルパーに導入したいマークダウン形式を記述 → 適用したいHTMLで、定義したメソッドを呼び出す。
適用したいフォーム
- 通常通り、投稿機能を作成すればOK。
- マークダウン形式で表示させたい部分のみ表記を変更。
例)マークダウン形式の導入(haml)
-# 投稿フォームは、通常通り
= form_for @post, local: true do |f|
= f.text_area :problem, placeholder: "マークダウン形式OK"
= f.submit "登録ボタン"
-# 投稿内容をマークダウン形式で表示
- @posts.each do |post|
= post.problem # マークダウン形式で表示されない
= markdown(post.problem) # マークダウン形式で表示される(ヘルパーで定義した markdownメソッドを呼び出す)
ヘルパー作成
- ここに、導入したいマークダウン形式を指定。
例)application_helper.rb
module ApplicationHelper
require "redcarpet"
require "coderay"
# マークダウン形式の導入（redcarpet）
def markdown(text)
options = {
filter_html: true, # htmlを出力しない
hard_wrap: true, # マークダウン中の空行をhtmlに置き換え
space_after_headers: true, # # と文字の間にスペースを要求
}
extensions = {
autolink: true, # <>で囲まれてなくてもリンクを認識
no_intra_emphasis: true, # 単語中の強調を認識しない
fenced_code_blocks: true, # フェンスのあるコードブロックを認識
strikethrough: true, # ~ 2つで取り消し線
superscript: true, # ^ の後ろが上付き文字
tables: true, # テーブルを認識
underline: true, # 斜線(* *)
highlight: true, # ハイライト(== ==)
quote: true, # 引用符(" ")
footnotes: true, # 脚注( ^[1] )
# 今回は不使用なので、間違ってるかも。こんなんもあるらしい程度。(詳細は、https://github.com/vmg/redcarpet)
xhtml: true, # xhtml タグ出力(Render::XHTMLでは常に有効)
lax_html_blocks: true, # HTMLブロックの上下の空行を不要にする
lax_spacing: true, # HTMLブロックの空行を不要にする
no_images: true, # img 要素を無効化
no_links: true, # a 要素を無効化
no_styles: true, # style 要素を無効化
safe_links_only: true, # 安全なリンクだけ出力
disable_indented_code_blocks: true, # 通常のマークダウンを認識しない。(行の先頭にある4つのスペースを持つテキストのコードブロックへの変換を無効化（ fencedcode_blocks: true と一緒の使用推奨))
escape_html: true, # HTMLタグをエスケープ。最優先され、:no_styles、:no_links、:no_images、:filter_html などは、削除ではなく、エスケープされる。
with_toc_data: true, # リンクの許可のため、出力HTMLのヘッダーにHTMLアンカー追加する
prettify: true, # prettyprintクラスを<code>google-code-prettifyタグに追加。
link_attributes: true, # リンクに追加する追加属性のハッシュ。
}
renderer = Redcarpet::Render::HTML.new(options)
markdown = Redcarpet::Markdown.new(renderer, extensions)
markdown.render(text).html_safe
end
#------------------------------------------------------------------
# 言語での記述（シンタックスハイライト）の導入（coderay）
class HTMLwithCoderay < Redcarpet::Render::HTML
def block_code(code, language)
language = language.split(':')[0]
case language.to_s
when 'rb' # rb も ruby と認識させる。って意味。
lang = 'ruby'
when 'yml'
lang = 'yaml'
when 'css'
lang = 'css'
when 'html'
lang = 'html'
when ''
lang = 'md' # 空欄だとエラー?（Invalid id given:）
else
lang = language
end
CodeRay.scan(code, lang).div
end
end
end
参)よく使うマークダウン記法
| 表示 | 記述 |
|---|---|
| 文字背景 | ` 、`` で囲む |
| 引用 | >、 >> でネスト構造（※ 上下に空行） |
| h1,h2,..タグ | # h1、## h2 |
| emタグ(イタリック) | *、_ で囲む |
| emタグ(太字のイタリック) | ***、___ で囲む |
| strongタグ(太字) | **、__ で囲む |
| ~~ で囲む | |
| 折りたたみ | ＜details＞＜summary＞要約部分＜/summary＞＜/details＞ （下記参照↓） |
| リスト | * 、 + 、 - 、 数字. (※1. 1. のように同じ数字にしておくと便利)、＜dl＞＜dt＞親＜/dt＞＜dd＞子＜/dd＞＜/dl＞の書き方も可（下記参照↓） |
| リンク | [リンク](url） |
| チェックボックス | - [ ]、 [x]（下記参照↓） |
| 水平線 | ---、*** |
| 画像 | ![alt](URL）、![alt](URL "タイトル"）（下記参照↓） |
| テーブル | ｜｜ |
| 数式 | 言語 mathで記述、$ で挟むと文中にも組み込める。数式は、TeX記法を使用。（下記参照↓） |
| 注釈[^1] | [^１] 脚注リンク、[^１]: 脚注のリンク先 |
| 上付き | ^ |
| ハイライト | == == |
| 絵文字 | : で囲む。※ 絵文字チートシート（下記参照↓） |
| Markdownを無効化(エスケープ) | \ を前につける |
例)折りたたみの書き方
<details>
<summary>**折りたたみの例**</summary>
<div>
サンプルコード↓↓ <!-- コードブロックの直前は空白行 -->
```rb:rb記法
puts 'rubyでの表記'
```
</div>
</details>
**折りたたみの例**
サンプルコード↓↓
rb記法
puts 'rubyでの表記'
例)Definition型でのリスト表示
<dl>
<dt>親1</dt>
<dd>子1</dd>
<dt>親2</dt>
<dd><strong>子</strong>2</dd> <!-- HTMLの書き方！(タグ内はMarkdown記法は使用不可) -->
</dl>
- 親1
- 子1
- 親2
- 子2
例)チェックボックス表示
- [ ] チェックボックス1 <!-- 前後にスペース -->
- [x] チェックボックス2
- チェックボックス1
- チェックボックス2
例)画像の埋め込み
例)数式の書き方
<!-- Tex記法 は、下記参照 -->
```math
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
``｀
$x^2 + y^2 = 1$
$a = \{1, 2\}$
$a = \\{1, 2\\}$ <!-- コントロールシンボル（ \の後に記号が来る）を使いたい時は、エスケープになるので、 \\ と記載。 -->
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$x^2 + y^2 = 1$
$a = {1, 2}$
$a = \{1, 2\}$
例)絵文字
:blush: 絵文字の埋め込み
絵文字の埋め込み
参)TeX記法
- 基本的に、
$で囲んで使う。
文字、記号
ギリシャ文字
| 大文字 | tex記法 | 小文字 | tex記法 |
|---|---|---|---|
| $A$ | A | $\alpha$ | \alpha |
| $B$ | B | $\beta$ | \beta |
| $\Gamma$ | \Gamma | $\gamma$ | \gamma |
| $\Delta$ | \Delta | $\delta$ | \delta |
| $E$ | E | $\epsilon$、$\varepsilon$ | \epsilon、\varepsilon(変体文字) |
| $Z$ | Z | $\zeta$ | \zeta |
| $H$ | H | $\eta$ | \eta |
| $\Theta$ | \Theta | $\theta$、$\vartheta$ | \theta、\vartheta(変体文字) |
| $I$ | I | $\iota$ | \iota |
| $K$ | K | $\kappa$ | \kappa |
| $\Lambda$ | \Lambda | $\lambda$ | \lambda |
| $M$ | M | $\mu$ | \mu |
| $N$ | N | $\nu$ | \nu |
| $\Xi$ | \Xi | $\xi$ | \xi |
| $O$ | O | $o$ | o |
| $\Pi$ | \Pi | $\pi$、$\varpi$ | \pi、\varpi(変体文字) |
| $P$ | P | $\rho$、$\varrho$ | \rho、\varrho(変体文字) |
| $\Sigma$ | \Sigma | $\sigma$、$\varsigma$ | \sigma、\varsigma(変体文字) |
| $T$ | T | $\tau$ | \tau |
| $\Upsilon$ | \Upsilon | $\upsilon$ | \upsilon |
| $\Phi$ | \Phi | $\phi$、$\varphi$ | \phi、\varphi(変体文字) |
| $X$ | X | $\chi$ | \chi |
| $\Psi$ | \Psi | $\psi$ | \psi |
| $\Omega$ | \Omega | $\omega$ | \omega |
演算子や符号
| 演算子 | tex記法 |
|---|---|
| $+$ | + |
| $-$ | - |
| $\times$ | \times |
| $\div$ | \div |
| $\pm$ | \pm |
| $\mp$ | \mp |
| $=$ | = |
| $\neq$ | \neq |
| $\equiv$ | \equiv |
| $\sim$ | \sim |
| $\simeq$ | \simeq |
| $\fallingdotseq$ | \fallingdotseq |
| $\risingdotseq$ | \risingdotseq |
| $>$ | > |
| $<$ | < |
| $\geq$ | \geq |
| $\geqq$ | \geqq |
| $\leq$ | \leq |
| $\leqq$ | \leqq |
| $\gg$ | \gg |
| $\ll$ | \ll |
その他の記号
| 記号 | 表記 |
|---|---|
| $\infty$ | \infty |
| $\forall$ | \forall |
| $\exists$ | \exists |
| $\ell$ | \ell |
| $\surd$ | \surd |
| $\partial$ | \partial |
| $\angle$ | \angle |
| $\backslash$ | \backslash |
| $\clubsuit$ | \clubsuit |
| $\diamondsuit$ | \diamondsuit |
| $\heartsuit$ | \heartsuit |
| $\spadesuit$ | \spadesuit |
| $\emptyset$ | \diamondsuit |
| $\flat$ | \flat |
| $\natural$ | \natural |
| $\sharp$ | \sharp |
| $\oplus$ | \oplus |
| $\ominus$ | \ominus |
| $\otimes$ | \otimes |
| $\oslash$ | \oslash |
| $\circ$、(例 $45^\circ$) | \circ、(例: 45^\circ) |
| $\cdot$ | \cdot |
| $\cdots$ | \cdots |
| $\bullet$ | \bullet |
| $\in$ | \in |
| $\ni$ | \ni |
| $\notin$ | \notin |
| $\subset$ | \subset |
| $\supset$ | \supset |
| $\subseteq$ | \subseteq |
| $\supseteq$ | \supseteq |
| $\cap$ | \cap |
| $\cup$ | \cup |
| $\emptyset$ | \emptyset |
| $\underline{下線}$ | \underline{下線} |
| $\overline{上線}$ | \overline{上線} |
字体
| 表示 | 表記 |
|---|---|
| ${\rm Roman}$ | {\rm Roman} |
| ${\it イタリック}$ | {\it イタリック} |
| ${\tt Typewriter}$ | {\tt Typewriter} |
| ${\bf太字}$ | {\bf 太字} |
| ${\sf SansSerif}$ | {\sf SansSerif} |
文字サイズ
| 表示 | 表記 |
|---|---|
| ${\tiny 最小}$ | {\tiny 最小} |
| ${\scriptsize スクリプトサイズ}$ | {\scriptsize スクリプトサイズ} |
| ${\small 小さく}$ | {\small 小さく} |
| ${\normalsize 普通}$ | {\normalsize 普通} |
| ${\large 大きく}$ | {\large 大きく} |
| ${\Large 大きく}$ | {\Large 大きく} |
| ${\LARGE 大きく}$ | {\LARGE 大きく} |
| ${\huge 大きく}$ | {\huge 大きく} |
| ${\Huge 大きく}$ | {\Huge 大きく} |
括弧
| 記号 | 表記 |
|---|---|
| {a} | \{a} |
| $\lfloor a \rfloor$ | \lfloor a \rfloor |
| $\lceil a \rceil$ | \lceil a \rceil |
| $\langle a \rangle$ | \langle a \rangle |
括弧の大きさ指定
| 表示 | 表記 |
|---|---|
| $\left( 標準 \right)$ | \left( 標準 \right) |
| $\bigl( 標準+1 \bigr)$ | \bigl( 標準+1 \bigr) |
| $\Bigl( 標準+2 \Bigr)$ | \Bigl( 標準+2 \Bigr) |
| $\biggl( 標準+3 \biggr)$ | \biggl( 標準+3 \biggr) |
| $\Biggl( 標準+4 \Biggr)$ | \Biggl( 標準+4 \Biggr) |
数式
| 表示 | 表記 |
|---|---|
| $\frac{a}{b}$ | \frac{a}{b} |
| $e^a$ | e^a |
| $a_{b}$ | a_{b} |
| $\exp a$ | \exp a |
| $\sqrt{a}$ | \sqrt{a} |
| $\sqrt[x]{a}$ | \sqrt[x]{a} |
| $\log a$ | \log a |
| $\log_a b$ | \log_a b |
| $\ln a$ | \ln a |
| $｜ｘ｜$ | ｜ｘ｜ |
| ${}_aC_b$ | {}_aC_b |
| ${}_aH_b$ | {}_aH_b |
| ${}_aP_b$ | {}_aP_b |
| $lim_{n \to \infty}$ | lim_{n \to \infty} |
| $\sum_{i=1}^{n}$ | \sum_{i=1}^{n} |
| $\prod_{i=1}^{n}$ | \prod_{i=1}^{n} |
| $\int_{a}^{b}$ | \int_{a}^{b} |
| $\iint_{a}^{b}$ | \iint_{a}^{b} |
| $\iiint_{a}^{b}$ | \iiint_{a}^{b} |
| $\idotsint_{a}^{b}$ | \idotsint_{a}^{b} |
ベクトル
| 表示 | 表記 |
|---|---|
| $\vec{x}$ | \vec{x} |
| $\overrightarrow{x}$ | \overrightarrow{x} |
| $\hat{x}$ | \hat{x} |
三角関数
| 表示 | 表記 |
|---|---|
| $\sin x$ | \sin x |
| $\cos x$ | \cos x |
| $\tan x$ | \tan x |
| $\csc x$ | \csc x |
| $\sec x$ | \sec x |
| $\cot x$ | \cot x |
| $\arcsin x$ | \arcsin x |
| $\arccos x$ | \arccos x |
| $\arctan x$ | \arctan x |
| $\sinh x$ | \sinh x |
| $\cosh x$ | \cosh x |
| $\tanh x$ | \tanh x |