Crayon Syntax HighlighterとFoundation6を併用した時の不具合

ソースコードをハイライト表示する定番プラグインの「Crayon Syntax Highlighter」ですが、Foundation6によるテーマ(要はこのブログ)で使用したところ、ソースコード表示に不具合が起きました。

原因と対処法を調べました。

AD

Crayon Syntax HighlighterのCSSが効かない

fondation-crayon1

上記のスクリーンショットはSublime Textのテーマを適用したものですが、グレーのしましまになってくれない…。

対処法

Foundation6のテーブル用スタイルが効いてしまっていることが原因です。
_settings.scssの492行目あたりで指定してあるテーブル用背景が適用されています。

$table-background: transparent; で解消されます。

横スクロールが出ない

foundation-crayon2

※Flex Grid使用時のみ起きる不具合です

ウインドウ幅が狭いときに本来なら親要素に横スクロールが表示されるはずですが、表示されません。

対処法

Crayon Syntax Highlighterによるソースコードが表示されるcolumnsに「width:100%」を指定します。

たとえば記事表示部分が以下のような場合(思い切り簡略化してます)、contentを含むcolumnにwidthを指定します。

Foundation6を使用したテーマとCrayon Syntax Highlighterを同時に使うケースも相当ニッチだとは思いますが、該当される方はよかったら参考にしてみてください。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。