web-dev-qa-db-ja.com

Pageの空白を保持する

私は頻繁にコード例を含むページを投稿します。しかしながら、Wordpressは空白を取り除き、それで私のコードのインデントとフォーマットを台無しにします。したがって、この:

<pre>
    selector {
       property: value;
       property: value;
    }
</pre>

これになります:

selector {プロパティ:値;プロパティ:値;}

改行を修正するRaw HTMLプラグインが見つかりましたが、Raw HTMLを使用してもスペースは保持されないため、次のようになります。

セレクタ{
プロパティ:値; 
プロパティ:値; 
}

Preserved HTMLエディタのMarkupプラグインも使ってみましたが、<pre><code>タグはサポートされていません。複数の連続したスペースを保存する方法

編集:ちょうど明確にするために、それがブラウザに送られる前に空白は Wordpressによって取り除かれた です。

3
brentonstrine

<code>タグの中にコードをラップしていません。

<pre>
<code>    
selector {
           property: value;
           property: value;
        }
</code>
</pre>

さらに、ほとんどの構文強調プラグインもコードをレンダリングするためにこのフォーマット(<pre><code>の両方)を使用します。ここにあなたはこれについての詳細があります。 https://css-tricks.com/snippets/css/make-pre-text-wrap/

2
carkod

ビジュアルエディタを使用しないでください。コードをあなたの 'HTML'ビューにコピーしてください。そうすればインデントが保たれます。それを「ビジュアル」ビューにコピーすると、コードはすべて左寄せになります。

http://codex.wordpress.org/Writing_Code_in_Your_Posts

1
revo

多分あなたはremove_filter( 'the_content', 'wp_filter_kses' );をすることができました、しかしそれは同様にコードビットだけでなく、ポストの残りからマークアップを削除するでしょう。

上記のようにフィルタを削除してから、'the_content'に独自の関数でフィルタを追加することをお勧めします。その関数では、どのものをマークアップに変換し、どのものを元の形式で残すか(たとえば、<pre>タグの間にあるものすべてなど)を正確に指定できます。

0
Marc Dingena

あなたはコードハイライトプラグインを使うことができます、例えば http://wordpress.org/extend/plugins/syntaxhighlighter/ 。彼らは空白を保つことができるはずです。

後続の空白は、HTMLではデフォルトで削除されます(たとえば、" " 2つの空白は" " 1になります)。

スペースをコード&nbsp;に置き換えるか、<pre></pre>タグの間にコードを追加することができます(整形済みテキストを示す)。

(私はプラグインをテストしたり、関連付けられていません)

0
Arevico