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でのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …

no image

Rails3.2でTwitter Bootstrap2対応のkaminariテーマを自作する〜というよりcucumber

環境 Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminariの続き すでにテーマがあるので適当に作っていたら、ページネーションをクリックしても昇順・降順の …

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …