Windows Live WriterでWordPressにソースコード入力させるプラグインをレスポンシブ対応カスタマイズ

ちょっとづつ賢くなってきている、あきら（@akrwnet）です（＾ｖ＾）

 

タイトルがめちゃくちゃ長くなってしまいましたが、色々なブログを徘徊していて思うことですが、みなさん見やすい記事を書いてくれますね。

そこで、ソースコードを見やすく表示させる、下図のようなのもは、どのようにするのだろうと疑問に思って来ました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>  はだしで履くスニカー！めちゃくちゃ軽いクロックスのcrosmesh hover lace up</title>

<link rel="alternate" type="application/rss+xml" title="ちぇっくぼっくす☑ RSS Feed" href="https://akrw.net/feed">

 

こんなのが、Windows Live Writerから投稿できたら良いですもんね。

WordPressではプラグインがありそうですが、Windows Live Writerではどうなのだろうか？

何か方法はあるはずです！と思い検索を酷使してみることにします。

Googleさんに感謝！！

 

スポンサーリンク

プラグインを両方に導入すればOK！

検索、検索としていくとやはり見つかるもんですね。

@oyuki_sun さんが、いい記事を書きいてくれています。

 

導入方法は

Windows Live WriterでCode Snippet With Syntaxhighlighter Support for Windows Live Writerのプラグインを導入

WordPress側でもSyntaxHighlighterを導入して有効化しておきます。

※プラグインの追加より検索すれば出てきます。似たようなものがたくさん出てきますがとりあえずこれでOKでした→SyntaxHighlighter Evolved

 

それと、設定を変えておくらしいです。

そしてWordPressの設定。自分はWordPressに「SyntaxHighlighter」のプラグインを入れていたので「すべてのブラシを読み込む」にチェックを入れる。

via:Q-miz blog

よくわかりませんが、動くようになればそれでよし！とうことで、これが何かは調べなかったので割愛！

 

自分が失敗した設定時の注意点

Windows Live WriterでCode Snippet With Syntaxhighlighter Support for Windows Live Writerのプラグインを導入すると、PreCode Code Snippent Managerというプラグインが使用できるようになります。

ソースコードを表示したいところで、このプラグインを起動させると別枠でツールが開きます。

その時の注意点ですが、デフォルトの設定のままでは正常に表示されなかったので、ここでつまずきました。

 

とりあえず、もう少しイジって見ることにします。

Surround WithをPREに設定し、Highligter ClassをXML/HTMLにします。

さらに、Show Rulerにチェック


2012-07-01_11h54_26

 

気がつけばQ-miz blogで画像があるので、それ通りに設定すればよかっただけです・・・

 

Windows Live Writer上では、これでいいの？当具合にソースが普通に表示されてしまいますが、WordPressに投稿すればしっかり表示されるようになるはずです。

2012-06-30_16h40_34

これでもOK

 

実装してはみ出してしまった時の対処法

うまい具合にWordPress表示させることができたと思ったら、完全にはみ出して表示されています。

2012-06-30_07h38_18

全部のテーマでこうなってしまうのかはわかりませんが、少なくともこのブログで使用しているiTheme2ではこのようにはみ出してしまいました。

せっかくソースコードを入れても、これではイケてないですね。

このままではiPhoneなどで表示した時にも、レスポンシブWebデザインの対応はされないでしょう。

 

では、CSSでwidth:100%に編集してしまえばいい、と思ってもどこにあるんだろ？？

ということは、前の記事で書いた方法が使えるのでは

はみ出し回避！関連記事を表示できるLinkWithinやYARPPをレスポンシブWebデザインに最適化

これ→width:100% !important;

 

しかし、どういったタグで挿入すればいいのかわからない・・・

どうすればいいのか検索してみたところ、やっとのことでこの記事を発見

 

ここに書いてあるのは

.syntaxhighlighter

これでいいのか？ということで

.syntaxhighlighter{

width:100% !important;

}

 

この記述をCSSに挿入したところ、バッチリ表示されました。

もちろん実機で確認もOK！iPod touchですけど

 

width:100% !important; は、いろんなことに応用ができそうですね♪

ではまた(＾‐＾)ゝ

スポンサーリンク

コメント

  1. おゆきさん (@oyuki_sun) より:
    2012年7月27日 5:27 PM

    紹介ありがとうございます。
    「すべてのブラシを読み込む」のチェックを入れるというのはWordPressの「SyntaxHighlighter Evolved」のプラグインの設定です。
    説明が分かりづらくて申し訳ありませんでした。

    返信
    • あきら より:
      2012年8月1日 8:08 PM

      おゆきさん
      コメントありがとうございます♪
      わかりづらいんでなく、自分がわからないからスルーしただけです。
      お気遣いありがとうございました（＾ｖ＾）
      あきら

      返信
  2. WindowsLiveWriterからの投稿記事にソースコードを挿入させる | セルティスラボ より:
    2013年2月21日 7:27 PM

    […] 具合にいかずにWebをさまよっていたのですが、Windows Live WriterでWordPressにソースコード入力させるプラグインをレスポンシブ対応カスタマイズ の記事が大変参考になり、何とか実現するこ […]

    返信
タイトルとURLをコピーしました