すたすた式
Blogger QooQ
コードをハイライトするのにhighlight.jsを使っています。
表示させるのに必要なコード例はCDN利用の場合
<link rel="stylesheet" href="/path/to/styles/default.css"> <script src="/path/to/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
この中のScript
<script src="/path/to/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
をラベル単位で読み込ませてみました。
素人が作成したものです、完全に動作を確認したわけではありませんし、不具合が出るかもしれないので、使用する際は留意してください。
HTMLを編集します。必ずバックアップを取ってから作業してください。
以前作ってみたコードを使いました。Gadget Version 1 だとBlogガジェット内でしか効かない制約があるっぽいです。。
<b:if cond='data:post.labels any (l => l.name in {"ラベルA","ラベルB","ラベルC"})'> <!-- ここに対象のコードを入れる --> </b:if>
上手く動いたコード例
<b:if cond='data:post.labels any (l => l.name in {"ラベルA","ラベルB","ラベルC"})'> <script async src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/> <script> window.addEventListener("load", function() { hljs.initHighlighting(); }); </script> </b:if>
CDNの部分とloadの部分の順番は逆でもOKでした
<b:if cond='data:post.labels any (l => l.name in {"ラベルA","ラベルB","ラベルC"})'> <script> window.addEventListener("load", function() { hljs.initHighlighting(); }); </script> <script async src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/> </b:if>
CDNのところは非同期にしたかったのでasyncを付けました。また、loadのところはそのままだと表示されなかったので、ページが読み込まれたときに（あとに）実行されるようにしてみました。
<data:post.body/>の前後であれば問題ないと思います。
<data:post.body/>
今使っているテンプレートはQooQなのでとりあえず
<!-- ここらへんとか --> <div class='post-body' id='single-content'> <data:post.body/> ...... <!-- もしくはここらへんとか --> <div id='single-footer'>
に貼り付けると上手くいきました。
Bloggerカスタム、Vaster1.9などのラベルがあるときにだけ、highlight.jsのscriptを読み込むようにしました。
<b:if cond='data:post.labels any (l => l.name in {"Bloggerカスタム","Vaster1.9","Vaster2","QooQ","Firefox","Windows10"})'> <script> window.addEventListener("load", function() { hljs.initHighlighting(); }); </script> <script async src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/> </b:if>
linkはpreloadを追加して<head>~</head>内に追加しました。
<head>~</head>
<link rel="preload" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/a11y-dark.min.css" as="style"/> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/a11y-dark.min.css" media="print" onload="this.media='all'"/>
（上記コードをBloggerのHTMLに追加して保存すると、Blogger内でいろいろな変換が行われるようで、出来上がりは若干コードが異なったものになりました。）
追記：preloadはやめてhighlight.js/src/styles at main · highlightjs/highlight.js · GitHubでコピーしたものを直接テンプレートに貼り付けました。
ラムダ式について
link rel="preload"について
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿