1

Bootstrap と google code prettyfier を一緒に使用しようとしていますが、最終的な結果はかなり残念です。でGemfile

gem 'bootstrap-sass', '~> 2.2.1.1'
gem 'google-code-prettify-rails'

application.css

*= require bootstrap
*= require google-code-prettify-rails/prettify

application.js

//= require bootstrap$
//= require google-code-prettify-rails/prettify
//= require google-code-prettify-rails/lang-sql

そしてprettyPrint()、.coffee スクリプトからロード時に実行します。

jQuery ->
  prettyPrint()

すべて正常に動作し、<code class="prettyprint lang-sql">...</code>フォーマットされます。しかし、悲しいことに、それをフォーマットする CSS は、Bootsrap の CSS と prettyprint テーマの CSS の混合物であり、表示が見苦しくなります。Element Inspect は、Bootstrap から適用されたスタイルを示しています。

/* line 8, .../bootstrap-sass-2.2.1.1/vendor/assets/stylesheets/bootstrap/_code.scss */
code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/* line 17, .../bootstrap-sass-2.2.1.1/vendor/assets/stylesheets/bootstrap/_code.scss */
code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

私の質問は

  • アセット パイプラインに Bootstrap 自身のものを含めないようにする方法はあり_code.scssますか?
  • そうでない場合、Bootstrap の適用されたスタイルをリセットするにはどうすればよいですか?
4

0 に答える 0