RailsでTwitterBootstrap Railsで使えるGem

RedcarpetでTOC表示

投稿日:

Redcarpet

github.com/vmg/redcarpet

#272 Markdown with Redcarpet

Redcarpetの使い方

基本的な使い方

そして、render

設定 extentions

  1. :no_intra_emphasis
  2. :tables
  3. :fenced_code_blocks
  4. :autolink
  5. :disable_indented_code_blocks
  6. :strikethrough
  7. :lax_spacing
  8. :space_after_headers
  9. :superscript
  10. :underline
  11. :highlight
  12. :quote
  13. :footnotes

設定 render options

  1. :filter_html
  2. :no_images
  3. :no_links
  4. :no_styles
  5. :escape_html
  6. :safe_links_only
  7. :with_toc_data
  8. :hard_wrap
  9. :xhtml
  10. :prettify
  11. :link_attributes

そして、viewで

TOCを表示する

TOCはtable of contentsの略で、一文のH要素を集めたもの

TOC用のリンクを追加

rendererのオプションの:with_toc_dataをtrueにする

TOCを表示する

rendererにHTML_TOCを使う.ヘルパー内に記述した.

なお、nesting_levelオプションでh1~h6のどこまでtocで抜き出すか指定できる

できた

screenshot

Bootstrapのaffixとscrollspy

affixは要素を固定するJavascript.
scrollspyはスクロールに合わせてli要素にactiveクラスをつけてくれるJavascript.

affix.js

position: fixedに変わってしまうと、サブメニューの位置が変なところになってしまうので、affixクラスの位置を固定するしかなかった.

余談だけど、Turbolinksとインラインリンクは相性が悪い.
リンクをクリックすると#の左にid要素が追加されるという意味不明な状態.
例えば、#helloをクリックすると、posts/2hello#helloになっちゃう.
で、Turbolinkはオフにした.

scrollspy.js

指定するtargetはulを含むdivクラスでもよい.

そして、いまのところコントロールの方はnavクラスが必要.
redcarpetのtocジェネレータには適当なオプションがないぽいのでsub!(最初にマッチしたパターンを置き換え)で.

screenshot

nav-pillsを辞めて、cssを適当に設定すれば本家ぽい感じに

screenshot

scrollNav.js

scrollNavは対象の要素から、h1~h6の好きな要素を抜き出して自動的にリストを作ってくれる.
そして、そこまでスクロールしてくれる.
また、スクロールを検知して、現在地にactiveとin-viewクラスをつけてくれる.
というわけで、RedcarpetのTOCもいらないし、Bootstrapのscrollspyもいらない感じになる.
scrollnav.com/

Download

公式からダウンロードして、解凍したら、vendor/assets/javasctipts/に移動する.
application.jsも設定.

設定

メニューを突っ込む場所を指定することと、できるメニューにクラスとかをつける方法がよくわからなかったので、callback関数でクラスをつけた.
基本的にいる場所にactiveクラスを1箇所だけつけてくれるけど、最後の章が短いとactiveクラスはつかない.
in-viewクラスは見えている場所すべてにつけてくれる.

screenshot

-RailsでTwitterBootstrap, Railsで使えるGem
-, , , ,

執筆者:

関連記事

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

Rails3.2+Mongoidでログイン機能~devise

  目次1 Gemfile2 generate3 model4 試す5 Login/Logout6 アクセス制限7 メニュー構成を整える8 翻訳 I18n9 見た目を整える Gemfile …

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …