web-dev-qa-db-ja.com

構文インラインの強調表示

現在のバージョンのWordPress（この質問の執筆時点では3.1.1）と互換性があり、プログラミング言語の構文のインラインハイライトをサポートするプラグインを探しています。基本的に、私はcodeを使用してStackExchangeエディタで表示されるように、function name、variable name、または簡単なif statementを段落の一部として記述してbackticksのように表示できるようにします。 。

WordPressでプログラミング言語の構文を強調表示するための優れたプラグインはいくつかありますが、インライン構文の強調表示をサポートしているようには見えません。

jQuery.Syntax はインライン機能を持っていると主張していますが、Wordpress 3.1.1では動作しません。

wysiwygsyntax-highlightingplugin-syntaxhighlighter
4
Alan Turing

インラインコード例のスタイル設定にSOタイプのバックティックマークアップを使用したい場合は、それを実現するコードをいくつか作成しました。あなた自身のプラグインにするためには、単にあなたのfunctions.phpに以下のコードを追加してください。ワードプレスフィルタ "the_content"を呼び出して、表示時にコンテンツに変換を適用し、それによって変換がデータベースに保存されないようにします。

function style_my_inline($content){

//what you use to denote your code
$inline_marker = "`";

//regex for code
$pattern = "/".$inline_marker."[\w\D\d]+?".$inline_marker."/";
preg_match_all($pattern,$content,$matches);

//what you want your surrounding markup to be 
$prepend_tag = "<span class = \"code\">";
$append_tag = "</span>";

//for each occurance in preg match results...
foreach($matches as $match){
    for($i=0;$i<count($match);$i++){
        //remove inline marker from match text
        $match_without_inline_marker = str_replace($inline_marker,'',$match[$i]);
        //add surrounding markup to match
        $match_with_tags = $prepend_tag.$match_without_inline_marker.$append_tag;
        //replace match in original content with marked-up match
        $content = str_replace($match[$i],$match_with_tags,$content);
    }
}

return $content;
}

apply_filters("the_content","style_my_inline");

さて、私はいくつかのダミーテキストで上記のコードをテストし、そのようにコードブロックを定義するためにバッククォートを使用しました：

Lorem ipsum dolor sit amet, `consectetur adipiscing elit`. Donec nec magna erat. `Aenean nisi ante`, semper vel imperdiet sed, laoreet.

その後、次のCSSを適用しました。

<style type = "text/css">
span.code{color:#56aaff;font-family:courier;background:#e5e5e5;padding:1px;}
</style>

そして私が得るものはこのようになります： screenshot of code block

これがあなたのために働くことを願っています。

4
kevtrout