1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

# Ruby on Rails で Qiita::Markdownを導入

Last updated at Posted at 2022-03-07

1. gemをインストール

  • Gemfileに下記を記述し % bundle installを実行
gem 'qiita-markdown'
  • % bundle install実行するもエラー
An error occurred while installing rugged (1.4.2), and Bundler cannot continue.
Make sure that `gem install rugged -v '1.4.2' --source 'https://rubygems.org/'` succeeds before bundling.
  • ネット検索の結果下記コマンドを実行
% gem install rugged -v '1.4.2' --source
% brew install cmake
  • 無事インストールできたみたいなので再度% bundle installを実行
  • 無事gemをインストールできました。
  • 下記メッセージが表示されたのでgithubのホームページを確認
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------
  • Gemfileに 「gem 'html-pipeline'」に追記後、下記コマンドを実行するようにあったので実行してみました。
% gem install html-pipeline
  • 下記が表示され無事インストールできました。
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------
Successfully installed html-pipeline-2.14.0
Parsing documentation for html-pipeline-2.14.0
Installing ri documentation for html-pipeline-2.14.0
Done installing documentation for html-pipeline after 0 seconds
1 gem installed

・下記を記載してbundleinstall

gem 'github-linguist'
gem 'rouge'

これでgemのインストールは完了

2. ヘルパーとhtmlを編集し実際に使用できるようにします。

  • application_helper.rbに下記コードを記述
    スクリーンショット 2022-03-07 20.08.39.png
  • マークダウン記法を反映したい箇所に「qiita_markdown(カラム名)」を記述
    スクリーンショット 2022-03-07 20.11.00.png

3.導入できたが、うまく反映されない

  • ネット検索するとブートストラップを導入しないと反映されないと発見
    -下記をGemfileに記述
gem 'bootstrap-sass'
  • app/assets/stylesheets/ の中にある
    application.css を application.cssの拡張子をscss に名前を変更してから
    以下の2行を追加。
@import "bootstrap-sprockets";
@import "bootstrap";

4.これで私の場合はマークダウン記法の導入が完了しました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?