読書体験を改善するためにコードテーマなどを変更_html/css_WEB-ITnose

読書体験についての私の意見

Singleton についてこのブログ記事を書いた後、習慣的にクリックして閲覧してみたところ、Markdown を使用しても読書体験はまだ少し悪いと感じています。私はいつもそれが十分ではないと感じています。なぜ？その主な理由は、このブログ投稿ではいくつかのコード サンプルが使用されており、ブログ パークのデフォルトのコード テーマ スタイルが実際には良くないからです。この記事はコード例が多すぎるため単調に見え、読み心地が非常に悪くなります。

読書体験が良くない場合はどうすればよいですか?この問題に対処する方法は人によって異なります。もしかしたら読むのをやめてしまう人もいるかもしれません。でも、間に合わせたくない私としては、絶対に間に合わせられないんです。読書体験が本当に悪い場合は、通常は Ctrl+w だけで別れを告げ、読まないでください。なぜなら、ブログ記事で最も重要なのは読書体験であると常々感じているからです。読書体験が悪ければ、内容がどんなに良くても、ブログ記事の価値は大きく損なわれてしまいます。したがって、記事にレイアウトが悪い、フォントが小さすぎる、単調になるなどの問題が発生することを決して許可してはなりません。

それでは、どうすれば読書体験を改善できるでしょうか? 一般的なブログ投稿で最も重要なことは組版で、組版は本当に面倒ですが、Markdown のおかげで、それほど心配する必要はありません。マークダウンを直接使用してブログ記事を作成すると、組版の知識がなくても、優れたレイアウト効果を備えたブログ記事を簡単に作成できます。そして、プログラマーとして、私たちはマークダウン「言語」を使用しませんが、これは少し不合理です。 写植が解決したら、次に解決するのはフォントです。ブログ投稿のフォントで最も重要なのはフォントのサイズだと思います。どのフォントを使用するかは問題ではありません。Song フォント、Microsoft YaHei など、好みに応じて選択できます。自分のブログ投稿を他の人に見せるだけでなく、自分自身でも見る必要があります。最もよく見るのは自分自身です)。フォントサイズはどのくらいの大きさにすればよいのでしょうか？個人的には14pxから17pxがベストだと思って16pxを使っています。組版とフォント サイズを設定したら、最後のステップはコード スタイルを設定することです。結局のところ、私たちは皆プログラマーであり、コードは不可欠です^_^。 コードスタイルを変更する

コードスタイルを変更したいとき、私は2つの解決策を思いつきました

コードはWebページに表示されます テーマスタイルを変更するには、CSSを使用して設定することができます。したがって、スタイルを自分でカスタマイズできます。ただし、自分でカスタマイズするのは車輪の再発明のような感じで、複数の言語でのハイライトをサポートする必要があり、多くのコードを記述する必要があり、私はフロントエンドに特化していません。したがって、このアプローチは否定できます。

1. 
   現在、多くの Web サイトにコードの強調表示があり、さまざまな美しいテーマがあります。この人気のあるホイールは通常、誰かによって作成されます。そのまま使えます。利点は明白で、実装はシンプルかつ効率的で、さまざまな一般的な言語でのコードの強調表示を簡単にサポートできます。したがって、このオプションが推奨されます。
それでは、どのようなプラグインまたはライブラリがこの機能を提供するのでしょうか?良い。 。初めてで経験がないのでわかりません〜〜Googleの専門家に聞くしかありません。

コードハイライト

を検索するだけで、最初のものが直接highlight.jsに表示されます。名前を見れば推測できます。クリックして詳細を確認し、それが探しているプラ​​グインであることを確認してください。 (他にもプラグインがあるかもしれません。個人的な習慣のため、私は通常、Google 検索で 1 位に表示されているプラ​​グインを選択します) highlight.js プロジェクトを使用して、ブログパークのコードテーマを変更します

さて、結局はナンセンスです, いよいよテーマに入りました。 ^_^

Highlight.js の使い方は、公式チュートリアルを読めば誰でもわかると思います（フロントエンドを行うのにチュートリアルを読む必要はありません~~）ので、ここでは使い方について簡単に説明します。 。公式では主に 2 つのインストール方法が提供されています:

公式 Web サイトで必要なコンポーネントをカスタマイズした後、プロジェクトをダウンロードして自分のプロジェクトで使用します。

1. 
   CDN には、一般的に使用される 22 の言語によるオンライン バージョンがあります。直接引用可能です。
私が使用する 2 番目の方法。したがって、ブログ ガーデンの設定ページのヘッダー HTML コード (またはフッター HTML コード) で次のコードを使用するだけで済みます:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">

上記のコードについて注意すべき点は、

default.min.css

は、デフォルトのコード強調表示テーマを使用することを意味します。この名前を変更して、他のテーマを変更することができます。どのようなテーマがあるのか​​、そのテーマ名を知るには、公式の表示を参照してください。たとえば、私は monokai_sublime テーマを使用しています。したがって、CSS を導入するための私のコードは次のとおりです:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/monokai_sublime.min.css">

公式 Web サイトにも JavaScript コードを紹介する行がありますが、ここではその CSS コードのみが必要です。 (その js コードには、コードに基づいてコードがどの言語に属するかを検出する機能がありますが、私は一般的に

` ` ` ` ` ` ` ` ` ` ` ` ` ` `

このフォームを使用して言語を設定するのが好きで、公式は自動検出を行うと述べています常に成功するわけではないので、ここでは js コードを使用しません) 上記は、highlight.js プロジェクトを使用してコードの強調表示を実装していますね。しかし、まだ終わっていません~~ (急いで卵を投げる必要はありません~~ ハイライトの使用は非常に簡単ですが、ここでの工夫はブログの庭のスタイルと矛盾するためです)

修改博客园的样式，使 highlight 正常工作。

我们使用正确使用了 highlight 了，但是我们还要修改下博客园的样式来完美地显示 highlight 样式。博客园给每个用户都提供了一个叫 blog-common.css 的样式，里面包含了代码主题的样式。要使我们的 highlight 样式完美地显示，我们要把 blog-common.css 里的代码主题样式删掉。但是这里有个问题：blog-common.css 是博客园提供给我们的，我们无法修改它的代码，如何才能删掉它里面的代码呢？

经过片刻的思考后，发现只能把整个文件都删掉才能实现删除它里面的代码，但这个文件里还有其他的样式是我想要的，怎么办？ 经典作弊手法： copy --> 改。所谓的 copy --> 改 就是把 blog-common.css 的代码复制得到我们的 页面定制CSS代码 里然后修改（删除我们不要的，要至于删那些样式，我们可以用查看元素来查看那些样式是代码高亮的样式，然后把它们删掉，相信大家都懂的了，在此不累赘）。最后把 blog-common.css 删掉。

在页首 Html 代码或者页脚 Html 代码 里添加删除 blog-common.css 的代码（需要 js 权限）：

<script>document.getElementsByTagName("link")[0].remove()</script>

好，现在 highlight 样式就可以完美地显示了。 enjoy ！

最后

我同样不太喜欢默认的引用样式，因此添加上我的 markdown 引用的样式，喜欢的人可以拿去：

blockquote {    background-color: rgba(102, 128, 153, 0.05);    color: #5F5656;    margin-left: 25px;    padding: 5px 10px;    margin-top: 10px;    margin-bottom: 10px;    border-left: 5px solid #352D2D;}

最后，希望这篇文章能够帮助那些注重阅读体验的朋友，给大家带来惊喜！

参考

参考？一直坚持给出参考文章，希望能提供读者一些扩展阅读和体验解决问题的过程。但这篇没参考到什么文件，全文都是自己”瞎逼逼“出来的，并没有什么权威的参考。因此，如果你发现了 bug 或者有更好的方法，可以在评论里共享出来^_^ 。

（PS. 最近要好好看书准备找暑假实习了，因此博客的更新频率可能会比较低～～。好吧，偏离原计划了～～ ----成长记录）