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
-, , , ,

執筆者:

関連記事

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

By: Mauquoy Token Company – CC BY 2.0 railscasts.com/episodes/258-token-fields?language=ja&#03

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

no image

CarrierWaveのファイルをpublic以外に移す

  参照 How To: Secure Upload 現状でCarrierWaveのファイルがpublicという公開フォルダに置かれるのが気になったので調べてみた 違ってるかもしれないので自 …

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …