うるおいらんど

【WordPress】記事にソースコードを表示するCrayon Syntax Highlighterを導入してみた

WordPressプラグイン

追記があります。

Swiftでアプリを作っていくので記事にソースコード表示するプラグインが欲しい!

ということでCrayon Syntax Highlighterを導入してみました。

 

プラグインから新規追加で調べれば出てきますよ〜

インストールが終わるとすぐに利用できるようになります!

実際に記事投稿画面を見てみると・・・

スクリーンショット-2015-11-25-16.40.04

 

新しく<>マークが増えています!

 

これをクリックすると

スクリーンショット 2015-11-25 16.39.50のコピー

 

入力画面が出てきます!

そして実際に適当なコードを載せてみると

        if (userDefaults.objectForKey("saveRoomArray") != nil){
            classRoomTest.removeAll()
            let objectsRoom = userDefaults.objectForKey("saveRoomArray") as? [String]
            //var testNameString:AnyObject
            for testNameStringRoom in objectsRoom!{
                classRoomTest.append(testNameStringRoom as String)
            }
        }else{
            for var i = 0; i < 40; i++ {
                classRoomTest.append("")
            }
        }

こんな感じ。

時間割アプリの一部です。しばらく離れていると忘れちゃいますね・・・

var str = "Hello, playground"
print(str)

こんな感じ。どうでしょうか。

わかりにくいですが2行目にハイライトしていますよ〜〜。テーマも変更してみました。

なによりSwiftに対応しているのありがたいですのう

 

 

挿入時にも設定をいじることができますが、設定タブからCrayonに行くと基本設定ができます。

スクリーンショット 2015-11-25 16.50.20のコピー

 

日本語に対応しているのがありがたいです。

 

こちらの記事を参考にさせていただきました!

【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter

 

これでこれからはメモが捗ります(^o^)わーい

Additional Notes追記

現在はprism.jsを使っています。

今はprism.jsに移行しました!

WP Code Highlight.jsをリニューアル途中まで使ってたんですが、gistとの相性が悪すぎてやめました。 というか、gistがなぜかうまく表示できなくて色々戦った結果WP Code Hightlight.jsを使うのを諦めました。

で囲んだだけでハイライトするのが結構厄介・・・。

たった数行のSwiftのコードが見てられない・・・・ ほ、ほら・・・Swift2とSwift4じゃ別言語だから・・・

Comments

コメントはありません。

現在コメントフォームは工事中です。