HTTPS対応のCDNからSyntaxHighlighterを読み込む

2018.05.27
プログラミングor技術
前回Google Code Prettifyに変えましたが、表示が気に入らなかったので、SyntaxHighlighterに戻します。

BloggerでSyntaxHighlighterを導入する方法 | 非IT企業に勤める中年サラリーマンのIT日記
や
bloggerでSyntaxHighlighterを表示する方法 – 何かをやりたい何かになりたい
で紹介されるように、<head>タグの最後のほうに追加しとけば良いのですが、
HTTP通信で何か取ってくるようなのは制限されています。

なのでHTTPSが使える CDNから取ってくるようにします。
https://cdnjs.com/libraries/SyntaxHighlighter
にCDN一覧があるのでそこから探します。

例えばbloggerでSyntaxHighlighterを表示する方法 – 何かをやりたい何かになりたいで紹介されている例のURLの部分を、探したCDNのURLに置き換えて次のようにします。


<!-- デザイン用css -->

    <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/> 

    <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

 

    <!-- コア部分 -->

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

 

    <!-- 言語の定義部分 -->

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>



    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js' type='text/javascript'/>



 

 

    <!-- bloggerで使用可能にする -->

    <script type='text/javascript'>

        SyntaxHighlighter.config.bloggerMode = true;

        SyntaxHighlighter.all()

    </script>



  </head>

コメント