[Vim] The way of code from :editor to :post


Вставка блока кода из vim в wp-пост.

Сегодня напомнили про комманду vim’а – :TOhtml.
Она позволяет преобразовать редактируемый код в html со стилями самого редактора.
Т.о. для такого куска кода:

#input, #output {
  width:100%;
}
#input textarea {
  width:48%;
  margin-left:10px;
  height:250px;
}
#output textarea {
  width:99%;
  height:350px;
}

Получаем содержимое такого вида:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>~/prj/ApplyCss/style.css.html</title>
<meta name="Generator" content="Vim/7.3">
<meta name="plugin-version" content="vim7.3_v6">
<meta name="syntax" content="css">
<meta name="settings" content="use_css,number_lines">
<style type="text/css">
<!--
pre { font-family: monospace; color: #d0d0d0; background-color: #121212; }
body { font-family: monospace; color: #d0d0d0; background-color: #121212; }
.lnr { color: #bcbcbc; background-color: #1c1c1c; }
.Statement { color: #d7005f; font-weight: bold; }
.Number { color: #af5fff; }
.StorageClass { color: #ff8700; }
.Normal { color: #d0d0d0; background-color: #121212; }
.Function { color: #87ff00; }
-->
</style>
</head>
<body>
<pre>
<span class="lnr"> 1 </span><span class="Function">#input</span><span class="Normal">,</span> <span class="Function">#output</span> <span class="Function">{</span>
<span class="lnr"> 2 </span>  <span class="StorageClass">width</span>:<span class="Number">100%</span>;
<span class="lnr"> 3 </span><span class="Function">}</span>
<span class="lnr"> 4 </span><span class="Function">#input</span> <span class="Statement">textarea</span> <span class="Function">{</span>
<span class="lnr"> 5 </span>  <span class="StorageClass">width</span>:<span class="Number">48%</span>;
<span class="lnr"> 6 </span>  <span class="StorageClass">margin-left</span>:<span class="Number">10px</span>;
<span class="lnr"> 7 </span>  <span class="StorageClass">height</span>:<span class="Number">250px</span>;
<span class="lnr"> 8 </span><span class="Function">}</span>
<span class="lnr"> 9 </span><span class="Function">#output</span> <span class="Statement">textarea</span> <span class="Function">{</span>
<span class="lnr">10 </span>  <span class="StorageClass">width</span>:<span class="Number">99%</span>;
<span class="lnr">11 </span>  <span class="StorageClass">height</span>:<span class="Number">350px</span>;
<span class="lnr">12 </span><span class="Function">}</span>
</pre>
</body>
</html>

В таком виде это дает ровно ничего, т.к. wp не позволяет использовать блоки style.

Но можно применить каждый стиль к соответствующему елементу. Вручную геморойно, а готовых скриптовых решений нет (или я плохо искал).
Значит надо написать свой костыль. Сказано – сделано: Встречаем ApplyCss.
На странице можно указать готовый css и связанный с ним html, получив на выходе html с примененными стилями для каждого елемента из css и без классов и id.

Итак.. нас интересуют блоки style и body.
Вставляем содержимое блока style в поле для css, а содержимое блока body в поле для html.
На выходе получаем:

<pre style="font-family: monospace; color: #d0d0d0; background-color: #121212;"><span style="color: #bcbcbc; background-color: #1c1c1c;"> 1 </span><span style="color: #87ff00;">#input</span><span style="color: #d0d0d0; background-color: #121212;">,</span> <span style="color: #87ff00;">#output</span> <span style="color: #87ff00;">{</span>
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 2 </span>  <span style="color: #ff8700;">width</span>:<span style="color: #af5fff;">100%</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 3 </span><span style="color: #87ff00;">}</span>
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 4 </span><span style="color: #87ff00;">#input</span> <span style="color: #d7005f; font-weight: bold;">textarea</span> <span style="color: #87ff00;">{</span>
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 5 </span>  <span style="color: #ff8700;">width</span>:<span style="color: #af5fff;">48%</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 6 </span>  <span style="color: #ff8700;">margin-left</span>:<span style="color: #af5fff;">10px</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 7 </span>  <span style="color: #ff8700;">height</span>:<span style="color: #af5fff;">250px</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 8 </span><span style="color: #87ff00;">}</span>
<span style="color: #bcbcbc; background-color: #1c1c1c;"> 9 </span><span style="color: #87ff00;">#output</span> <span style="color: #d7005f; font-weight: bold;">textarea</span> <span style="color: #87ff00;">{</span>
<span style="color: #bcbcbc; background-color: #1c1c1c;">10 </span>  <span style="color: #ff8700;">width</span>:<span style="color: #af5fff;">99%</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;">11 </span>  <span style="color: #ff8700;">height</span>:<span style="color: #af5fff;">350px</span>;
<span style="color: #bcbcbc; background-color: #1c1c1c;">12 </span><span style="color: #87ff00;">}</span>
</pre>

А в самом посте это выглядит так:

 1 #input, #output {
 2   width:100%;
 3 }
 4 #input textarea {
 5   width:48%;
 6   margin-left:10px;
 7   height:250px;
 8 }
 9 #output textarea {
10   width:99%;
11   height:350px;
12 }

Вуаля.. прямо как в самом vim‘е.
Вот так можно вставлять в посты свои code-блоки вместо страшноватых вордпрессовских. =)

Advertisements

One comment

  1. Andrei Pak · October 10, 2014

    Восхитительно! Не знал что такое возможно.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s