Markdown記事スタイル最適化実践体験_html/css_WEB-ITnose

昨日ブログを投稿しました：おにぎり(0): 効率化を図る開発ツール。しかし、デフォルトのフォントは小さすぎます。読者に対して非常に不親切です。ブログガーデンでCSSをカスタマイズできる まだ仕事まで時間があるので、自分でやってみることにしました。

ラウンド 1

数日前に Yuanzi のブログで Markdown が非常に人気があると書かれていたのを覚えています。そこから何か学べることがないか見てみましょう。
Markdown Grammar 中国語版、残念ながら、これは単なる Markdown 文法の入門書です。そしてこのブログはMarkdownで書かれたものではありません。 。 。
この段階では何​​のメリットもありません~

ラウンド 2

CSS を自分で書くのは、当然、ありがたくない作業です。そこで、他の人に書いてもらえる人を探しました。本当はMark DumboのCSSを使いたいのですが。でも著作権の問題もあると思います。したがって、必ず github のスタイルを使用してください。

ラウンド 3

Google、キーワード github markdown css

約 521,000 件の結果が見つかりました (0.36 秒かかりました)`

最初のものはかなり良さそうです。 github: sindresorhus/github-markdown-css
オープンソース (MIT ライセンス、無料で使用できる) プロジェクト。

プロジェクトにはフォントが埋め込まれた CSS ファイル github-markdown.css があります。いい感じ。しかし、調べてみると、ブログパークの外部コンテナは .markdown-body ではなく .cnblogs-markdown のようです。これは変更する必要があります。他にも衝突があるかどうかはわかりません。

それでは、別のもの、できればブログガーデン用の CSS を探しましょう。

ラウンド 4

ブログをいくつか見つけてください。

ブログパークのマークダウンエディタの拡張
は単なる拡張でCSSは関係ありません

マークダウン機能の新バージョンがリリースされました！ github フレーバーのマークダウンをサポートします。
新しいバージョンの Blog Park のコードは Github に非常に似ているようです。そこで質問なのですが、ブログパークで使用しているCSSは今でも使用できるのでしょうか？

サブブログ: マークダウンと構文の強調表示をサポートするクロスプラットフォームのブログ クライアント
これは良いソリューションのようです。しかし、私は今でも執筆にMark Dumboを使用しています。 markdown.css には外側のコンテナー フィルターがないようです。

ブログガーデンでMarkdownを使ってブログを書くと
テンプレートのCSSと競合する可能性があるようです。テンプレートを変更する必要がある場合、作業は複雑になります。 。 。
そしてCSSの最後の段落

<style>/* ... */.markdown-body img {  max-width: 100%}</style>

は明らかにブログパークとは異なります。 (第3回参照)

そこで、諦めて探索を続けることにしました。 Round 3 で見つかった CSS は非常に優れていると感じています。十分に維持する必要があります。

ラウンド 5

そこで、私たちはこの巨人をベースにして、ブログパークの Markdown 記事のスタイルをターゲットにしたバージョンをフォークしました。

ステップ 1

フォークしてみよう!そこで、github: huizhong/github-markdown-css を入手しました

ステップ 2

外部コンテナを変更します。 すべての .markdown-body を .cnblogs-markdown commit に置き換えます

ステップ 3

github-markdown.css ファイルの内容をブログ パークの CSS 設定のページ カスタマイズ CSS コードにコピーします。

Step4

テストおにぎり(0): 効率を上げる開発ツール
いい感じ〜

まとめ

予定していた目標を達成するまでに1時間かかりました。 (時間の 80% はオンサイトのブログに費やされます:P)
まず需要があります。後で何を作りたいかを決めます。それから研究してください。最後のステップはコードを変更することです。
実際、本当に「役立つ」作業は 1 分で完了します。ナイフを研いだからといって薪割りができるわけではありません。
実際には、その後の改善がまだいくつかあります。たとえば、タイトルが小さすぎる場合は、フォークしたプロジェクトを変更します。指示を追加します。仕事終わったらまた来てね～仕事行って。