ソースコードを表示するためのGoogle-Code-Prettifyの導入

2020年8月25日火曜日

blogger Google Code-Prettify programing

t f B! P L

記事内のソースコードが表示されなくなってる・・・

 ソースコードを投稿しようとしたところ、うまく反映されなかったので調べてみたら使用していたCDNがサービス提供終了していたみたいことが原因だったようなので、手直ししました。

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>&lt/title>
        <link rel="stylesheet" href="./css/style.css">
      </head>
      

シンタックスハイライトサービスはGoogle-Code-Prettifyを使用しています。CDNが変更になっていたので書き換えです。

BloggerへのCDNの導入

以下のコードをBloggerのheader内に挿入

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

BloggerのHTMLの編集は画像のようにテーマを選択して、マイテーマの隣に表示される縦に並んだ「・・・」から行うことができます。

Bloggerの記事内はHTMLビューを選択して、下記のように<pre>タグで書く

//ここにソースコードを記入

html特殊文字の変換

ソースコード内の"&", "<", ">" ,'"', "'" の文字は "&", "<", ">", """, "'" に変換する必要があるので HTML特殊文字変換(https://yarase.sakura.tv/html_str_convert.php)などの変換ページを使用して変換してから記載する。

管理人

自分の写真
薬剤師・エンジニア 公認スポーツファーマシスト 医療情報技師

アクセスカウンター

70951

検索

最新記事

QooQ