最初は意外と手間取るブログへのコード貼り付け。
事前知識が無いとそのまま貼れると思っちゃって、確認したらおかしなことになってる。
あるあるだと思います。少し前の私です。
そんな方の為にやり方を出来るだけ丁寧に解説します。
bloggerでちょっとかっこ良くソースコードを貼る方法
私の以前の記事からの引用ですが、こんな風に貼れます。
下準備が必要です
まずは以下のコードをコピーしてください。
※出来るだけダブルクリックではなく、ドラッグで全選択してコピーしてください。
<!-- SyntaxHighlighter 追加 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"/>
<!-- autoloader対応 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js"/>
<!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"/>
<!-- テーマの読み込み(shCore.css内包版) -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreFadeToGrey.css" />
<script language='javascript' type='text/javascript'>
var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83';
SyntaxHighlighter.autoloader(
'actionscript3 as3 '+shCdnUrlStr+'/scripts/shBrushAS3.js',
'bash shell '+shCdnUrlStr+'/scripts/shBrushBash.js',
'coldfusion cf '+shCdnUrlStr+'/scripts/shBrushColdFusion.js',
'cpp c '+shCdnUrlStr+'/scripts/shBrushCpp.js',
'c# c-sharp csharp '+shCdnUrlStr+'/scripts/shBrushCSharp.js',
'css '+shCdnUrlStr+'/scripts/shBrushCss.js',
'delphi pascal pas '+shCdnUrlStr+'/scripts/shBrushDelphi.js',
'diff patch '+shCdnUrlStr+'/scripts/shBrushDiff.js',
'erlang erl '+shCdnUrlStr+'/scripts/shBrushErlang.js',
'groovy '+shCdnUrlStr+'/scripts/shBrushGroovy.js',
'html xml xhtml xslt '+shCdnUrlStr+'/scripts/shBrushXml.js',
'java '+shCdnUrlStr+'/scripts/shBrushJava.js',
'javafx jfx '+shCdnUrlStr+'/scripts/shBrushJavaFX.js',
'javascript js jscript '+shCdnUrlStr+'/scripts/shBrushJScript.js',
'perl pl '+shCdnUrlStr+'/scripts/shBrushPerl.js',
'php '+shCdnUrlStr+'/scripts/shBrushPhp.js',
'text plain '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'powershell ps '+shCdnUrlStr+'/scripts/shBrushPlain.js',
'python py '+shCdnUrlStr+'/scripts/shBrushPython.js',
'ruby rails ror '+shCdnUrlStr+'/scripts/shBrushRuby.js',
'scala '+shCdnUrlStr+'/scripts/shBrushScala.js',
'sql '+shCdnUrlStr+'/scripts/shBrushSql.js',
'vb vbnet '+shCdnUrlStr+'/scripts/shBrushVb.js'
);
SyntaxHighlighter.config.bloggerMode = true; // Blogger対応
SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
//不具合が起きる為コメント化。使用時はpre側で要記述。
//SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
// コード表示させるタグ名(デフォルト"pre")
// SyntaxHighlighter.config.tagName="";
SyntaxHighlighter.all();
</script>
<style>
.syntaxhighlighter {
font-size: 14px !important; /* フォントサイズ */
margin: 0.5em 0em 0.5em 0em !important; /* 上下空き */
border: 1px solid #bbbbbb !important; /* 罫巻 */
/* 角丸 */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
-ms-border-radius: 10px !important;
-o-border-radius: 10px !important;
border-radius: 10px !important;
}
.syntaxhighlighter table caption {
padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */
color: #ffffee !important; /* タイトル文字色 */
background-color: #666666 !important; /* タイトル背景色 */
}
.syntaxhighlighter, .syntaxhighlighter div,
.syntaxhighlighter code, .syntaxhighlighter span {
line-height: 1.2em !important; /* 行間 */
}
.syntaxhighlighter table td.code {
padding: 0.3em 0 !important; /* コードエリアのpadding */
}
.syntaxhighlighter {
background-color: #222222 !important; /* コード背景色 */
}
.syntaxhighlighter .line.alt1 {
background-color: #222222 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
background-color: #333333 !important; /* コード奇数行背景色 */
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
color: #88eeee !important; /* コメント色 */
}
.syntaxhighlighter .preprocessor {
color: #88eeee !important; /* #以降の色 */
}
.syntaxhighlighter .value {
color: #00cc00 !important; /* 代入数字色 */
}
.syntaxhighlighter .keyword {
color: #ff0000 !important; /* キーワード色 */
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #ff0000 !important; /* スクリプト色 */
background-color: none !important;
}
.syntaxhighlighter.nogutter td.code .container textarea,
.syntaxhighlighter.nogutter td.code .line {
padding-left: 1em !important; /* 行番号非表示時左空き量 */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #114466 !important; /* 行強調時、行背景色 */
}
.syntaxhighlighter .line.highlighted.number {
color: white !important; /* 行強調時、数字？ */
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #3185b9 !important; /* 行強調時、行番号背景色 */
color: #121212 !important; /* 行強調時、行番号数字色 */
}
</style>
<!-- SyntaxHighlighter 追加 -->
コピーは出来ましたか？
次は、管理画面の「テーマ」より、「htmlの編集」を選択します。
「Ctrl+Fキー」で「</body>」タグを検索して、「</body>」タグの上にペースト
してください。
出来たら「テーマの保存」をして準備は完了です。
実際の使い方
ブログ投稿画面で、「作成」ではなく「HTML」の編集画面にします。
コードを貼り付けたい場所で以下のコードをコピペしてください。
<pre class="brush:text" title="タイトル"> 書きたいコード </pre>
備考
・「brush:（言語）」の部分が
「actionscript3」「as3」
「bash」「shell」
「coldfusion」「cf」
「cpp」「c」
「c#」「c-sharp」「csharp」
「css」
「delphi」「pascal」「pas」
「diff」「patch」
「erlang」「erl」
「groovy」
「html」「xml」「xhtml」「xslt」
「java」
「javafx」「jfx」
「javascript」「js」「jscript」
「perl」「pl」
「php」
「text」「plain」
「powershell」「ps」
「python」「py」
「ruby」「rails」「ror」
「scala」
「sql」
「vb」「vbnet」
の多様な言語に対応しており、指定すればコードにハイライトを付けることができます。
こんな感じです。
HTMLとjavascriptにハイライトを付けたいと思ったら、
上のコードの「text」の部分を「js html-script: true」としてください。
何の言語か分からなかったり、特にこだわりが無ければ「text」のままで問題無いです。
・「title=""」のように内容を空白にすれば、表示のタイトルの帯を消せます。
・「brush:（言語）」と「title」間に「gutter:false」を追加すれば行番号を非表示に、
「first-line:（数字）」で開始行番号の指定、
「highlight:[（数字）]で行を強調表示（複数ならコンマで区切って）が出来ます。
編集画面にコードを貼り付けたら、次は本題の貼り付けたいコードを…
そのまま貼ってはダメです。
「<」を「＆lt;」に、「>」を「＆gt;」に変換する必要があります。
（＆は本来は半角です。半角だと特殊文字と認識されてしまうので）
自分でいちいちやるのは非常に手間が掛かりすぎるわけですが、
自動で変換してくれる大変ありがたいツールを公開している方がいらっしゃいます。
http://1studying.blogspot.com/2017/04/blog-post.html
ここはコードを貼って変換、コピーするだけです。
ここでコピーしたものはすでに「preタグ」が付いているのでそのままHTML編集画面に貼
り付け可能です。超便利。
お疲れ様でした。
ちなみに、プレビューでも確認できます。
※「テーマ」から「モバイルテーマの選択」→「はい。モバイル端末でモバイルテーマを
表示する。」→テーマの選択を「カスタム」にしないとスマホで横スクロール表示が上手
くいかない場合があるようです。
この記事は以下のサイトを参考にさせていただきした。ありがとうございます。
http://1studying.blogspot.com/2017/04/blogger_93.html
|
|
|
