1
2

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 5 years have passed since last update.

CSSをファイル内に入れ込んでMarkdownのプレビューを修正した

Last updated at Posted at 2020-03-02

概要

メモやちょっとした書き物は,.mdファイルに書くのが便利。プレビューやpdf化はChromeの拡張機能(MarkDown Preview Plus Options)の利用が手っ取り早いです。で,Themesの中では「Github」が一番見やすいのだけど,

  • コード部分の文字が小さい上,グレーっぽい文字になる

のが不満。コードがしっかり見えるようにしたいのに!
あと,ついでに

  • 引用やコードがグレーっぽい文字になる

  • h1,h2,h3タグのサイズの違いがわかりにくい

というのも変えたくて調べてやってみたのでメモ。

.css ファイルを作って読み込ませる形にするといいんだろうけど,よくわからない&どこにおくのか(わかんなくなりそう)
,という問題があるのと,ちょっとの修正でよいので,カスタマイズするとこだけファイル内に書いてみることにしました。

方法

Markdownファイルの中にCSSを入れ込んでみた - Qiita
によると,styleにscoped属性っていうのがあって,<style scoped></style> を使って,この中にcssを書けばいいみたい。

githubのcssのコードをみて,変えたらよさそうなところをかえてみることにして,githubのcssについては
githubのmarkdown-cssをぶっこ抜く方法 - Qiita
を参考にしました。
https://github.com/sindresorhus/github-markdown-cssgithub-markdown.cssがあるけど,.markdown-で始まる形で記述されているので注意(ファイル内の.markdown-を空文字に置換すればいいらしい)。

加えたstyleタグ

コードの意味はよくわかってないのだけれど,github-markdown.cssのコードを眺めて,関係ありそうなところをコピペして修正したのを使ってみました。コード部分の色とフォントサイズ,フォントの種類を変えたのと,引用部分の色,とh1タグとかの文字サイズを変更。以下のコードを.mdファイルの最後に書きました。

<style scoped>
body code {
  font-size: 120%;
  color: #1b1f23; 
  font-family:SFMono-Regular,Consolas, 'Courier New', monospace;
}

blockquote {
  color: #1b1f23;
}

body h1 {
  font-size: 2em;
}
body h2 {
  font-size: 1.4em;
}
body h3 {
  font-size: 1.15em;
}
body h4 {
  font-size: 1em;
}
 </style>

ChromeのMarkDown Preview Plus Options(Themesは「Github」)で見てみたら,コードがはっきり大きくなって,見やすくなってました。pdfへの印刷でもいい感じ。

メモ

以下にある「元」はgithub-markdown.cssの記述です。ChromeのThemesの「Github」のとは少し違うみたい。

  • 色はgithubのコードの中に出てくる黒っぽい色(#1b1f23)にした。(blockquoteは元は#6a737d

  • codeのfont-sizeは85%→120%にした。行内コードの文字も大きくなった。こっちはもともと小さくなってなかったので大きくなりすぎの感があるが,まあいいか,でとりあえずそのまま(よくわからないし)。

  • codeのフォントはgithub-markdown.css`のを持ってきた。

  • h1~h4の文字サイズは,github-markdown.css`では,2em,1.5em,1.25em,1em。h4はそのままなので,なくてもいいはず。

  • (課題)ブロックコード内の---が2個以上連続)がある行が,元のグレーの色になった上,同じ行の以降の部分の文字(アルファベット)が斜体になった。ここも黒い色&斜体でない形にしたかったのだけど,方法がわからず,そのまま。

参考にした・なりそうなページのまとめ

1
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?