ソースコード表示（SyntaxHighlighter）

参照：http://alexgorbatchev.com/SyntaxHighlighter/
参照：https://alex.blog/wordpress-plugins/syntaxhighlighter/
参考：https://blog.s-giken.net/231.html
実験対象バージョン：HTML5、CSS3
  1. サンプル
  2. ダウンロード
  3. 使用方法
  4. オプション

サンプル

ダウンロード

普通にここでダウンロード出来ると思ったのですが、どうも動かない。。。。
他のサイトによるとどうやら、「scripts」「styles」のフォルダを～がほぼ全て出てくる項目でした。
明らかにそんなフォルダはないし、これかな？というjavascriptを投入するも動かない！！！！
このままWordPressにしようかと悩むほど・・・
WordPressならプラグインがあるし、そっちでやればいいと思ったのですが、私的にはhtmlを使ったサイトでの実験的なものが主になる予定のサイトなので・・・。
考え抜いてWordPressのプラグインを抜粋出来ないかと思い今に至っています。
WordPressのプラグインのサイトからソースを拝借するというものです。
SyntaxHighlighterのGithubのページ
WordPressプラグイン作者のブログにある、GitHubからソースを取得します。
GitHubをどうやって取得するのか・・・Gitを使い始めている私ですが、何故かこの辺り毎回よくわからないというかブランチ切っていいのかって気になるので、いつも「Clone or download」から「Download ZIP」でダウンロードしています。

使用方法

言語の指定

使用したい言語を以下の表より確認します。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/から抜粋しています。
Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js
例えば、「html」の場合 
                        
                        
                        
                        
                         
                           
                            ここに表示したいソース
欲しい「File name」を追加します。
htmlの場合だと以下を追加します。
以下の中にソースを追加します。
「class="brush: html"」のhtmlが 「Brush aliases」で表示したいものに変更します。 
                         
                           
                            ここに表示したいソース

shCoreDefault.css

デフォルトを使用していますが、実は少し変更を加えています。
行を交互に色付け
                        .syntaxhighlighter .line.alt1 {
                            background-color: #f5f2f2 !important;
                        }
スクロールバーの非表示
                        .syntaxhighlighter {
                          overflow-y: hidden !important;
                        }
                        .syntaxhighlighter.ie {
                          font-size: 1em !important;
                          padding: 0 0 2em !important;
                        }

オプション

特定の行をハイライトさせる

                        
                           
                            1行目
                            2行目
                            3行目

HTMLのコードと他言語のコードを同時にハイライトする

開始行番号を変える

                        
                           
                            1行目
                            2行目
                            3行目

ツールバーを非表示にする

                        
                           
                            1行目
                            2行目
                            3行目

ソース内のリンクを外す

                        
                           
                            https://souryukan.seshimu.work/
                            1行目
                            2行目
                            3行目