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によって取り除かれた です。

htmlformattinghtml-editor
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