Markdown スタイルを最適化し、コード行番号を実装します。display_html/css_WEB-ITnose

1. 前に書く

私は以前に Youdao Cloud Notes と Weizhi Notes を使用していましたが、偶然 Markdown を使用してドキュメントを書くことに夢中になりました。 Markdown のシンプルさと壮大さに感銘を受け、Youdao Cloud を放棄し、Github 上のドキュメントとメモを一元化できる Weizhi Notes の使用に集中しました。最後に、Yuanzi のエディタを Markdown に変更しました。

しかし、Yuanzi の Markdown レンダリング効果は、Weizhi Notes や github のものに比べて十分美しくないため、Yuanzi の Markdown スタイルを変換することにしました。

2. 変革への道

2.1 CSS を変更する

CSS を変更する方法については、ここでは詳しく説明しません。 ->要素を検査します。

/*部分代码如下*/.cnblogs-markdown a {    background: transparent;}.cnblogs-markdown a:active,.cnblogs-markdown a:hover {    outline: 0;}

2.2 コードの行番号表示をサポート

いくつか内容を書いてみたところ、コードのハイライトはサポートされているものの、行番号の表示はサポートされていないことが分かりました。コードに行番号がないのはどうしてでしょうか?

要素を確認した結果、Markdown エディターを使用すると、コードに多数の HTML タグが追加され、ガーデンに付属する SyntaxHighlighter プラグインが完全に機能しないことがわかりました。したがって、JavaScript ステートメントを追加してコード部分を再レンダリングすることを検討してください。

<script type="text/javascript">      // 博客内的链接在新窗口打开    $("#cnblogs_post_body a").each(function(){        $(this).attr("target","_blank");    })     var pre = $("pre.sourceCode"); //选中需要更改的部分    if(pre && pre.length){        pre.each(function() {            var item = $(this);            var lang = item.attr("class").split(" ")[1]; //判断高亮的语言            item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre class="brush:php;toolbar:false">标签中的html标签去掉            item.removeClass();   //移除 class            item.addClass("brush: " + lang +";"); //根据语言添加笔刷            SyntaxHighlighter.all();        })    }</script>

2.3 完全なソース コードをダウンロードします

完全なコードは github にアップロードされており、今後も継続的に最適化および更新されます。フォローおよびメッセージを残すことを歓迎します。

3. 使い方

この記事のスタイルが気に入ったら、次の方法を試してみてください。

style.cssのコードをブログパークのバックエンド管理のページカスタマイズCSSコードにコピーします。

footer.js のコードをブログ パーク バックエンド管理のフッター HTML コードにコピーして、スクリプト タグを追加するには、目的を明記して contact@cnblogs.com にメールを送信する必要があります。

エディタ設定でデフォルトのエディタをMarkdownに設定します

WYSIWYGオンラインMarkdownエディタを推奨します - Job Tribe