[討論] 「Hexo 佈景主題的樣式」和「Brackets 的 MarkdownPreview Extension」整合的可行性

samwhelp commented 10 years ago

剛剛才知道有「Brackets」這個編輯器。我裝了這個「MarkdownPreview」。初步看起來是也是用「marked」。我在想是否可以和「hexo」整合在一起。因為我的需求大部分只有文字，沒有圖。所以其實我不貪心，只要用「Brackets」撰寫markdwon文件的時候， Live Preview和Hexo的佈景主題樣式一致就行了。

剛測試了一下

```php class Test { echo "yes"; } ```

出來的是這個

<pre><code class="lang-php">class Test { echo "yes"; }</code></pre>

看了程式碼只有單純的用 marked來parse和一個簡單的處理

 // Parse markdown into HTML
bodyText = marked(docText);
// Show URL in link tooltip
bodyText = bodyText.replace(/(href=\"([^\"]*)\")/g, "$1 title=\"$2\"");

然後就把parse出來的內容塞到一個「iframe」裡面，就產生了 live preview的效果。

我本來是先在「templates / settings.html」加了一個選項

<option value="hexo">hexo</option>

然後在「themes」這個資料夾加了一個「hexo.css」，然後把我自己使用的佈景主題產生出來的css。貼到這個檔。

在preview可以選「hexo」的選項，就會有效果了。不過還是有些差距，看來要來了解hexo，parse那段。

preview的樣板檔是「templates / preview.html」

我把他加了一行「<textarea><%= bodyText %></textarea>」，就可以看到那個parse出來的結果。

<!DOCTYPE html>
<html>
    <head>
        <base href="<%= baseUrl %>">
        <link rel="stylesheet" href = "<%= themeUrl %>">
    </head>
    <body onload="document.body.scrollTop = <%= scrollTop %>;document.body.className=''">
        <%= bodyText %>
        <script>
            // Set scrollTop as soon as the body is parsed. This help with flicker when
            // the onload event is delayed until images are loaded.
            document.body.scrollTop = <%= scrollTop %>;
        </script>
        <textarea><%= bodyText %></textarea>
    </body>
</html>

以上初步想法提出來討論摟

:-)

wzpan commented 10 years ago

个人感觉没必要整那么复杂。Markdown本身就是WYTIWYG（所想即所得）而非WYSIWYG（所见即所得）的东西。要让编辑器和最终效果完全一致，相当于编辑器要能理解和处理 css 和 js，这相当于编辑器要内嵌一个浏览器的 render 了。还不如直接用 livereload ，一边用普通编辑器写文章，一边自动更新浏览器。

samwhelp commented 10 years ago

@wzpan

您所言甚是，我昨天改用「Brackets」在寫，撰寫上大部分的時間，幾乎都沒在看「Preview」，結果還是像你說的，最終還是看瀏覽器的結果。而且還是整個一口氣寫完後才看，稍微修改一下筆誤的地方，符合您說的「WYTIWYG（所想即所得）」。

會提這個，只是昨天使用「Brackets」的「MarkdownPreview」，所以嘗試了一下，把hexo佈景主題的css套上去，我主要是想要「字和Code」的樣式符合佈景主題，因為我大多是「字和Code」，我的原意並沒有想把整個Hexo整合進去。我改一下標題好了。

我最近才發現有一個編輯器「geany」，也有一個Plugin「geany-plugin-markdown」，也是你說的，內嵌一個瀏覽器，來達到「Preview」的功能，只是哪時候我的嘗試，也是無法直接套用「Hexo」佈景主題的「css」。因為在「Code」這一段「Parse」出來的結果並不相同。所以最後我還是採用我以前找到「ReText」自訂Preview的「CSS樣式」，接近「Github」的樣式。

不過，習慣上，我也還是沒在用「Geany」和「Retext」在寫markdown。還是使用我常用的兩個編輯器「Sublime Text」或「Vim」在寫。最終用瀏覽器來看結果。就像你提到的思維，這樣的模式也不用依賴哪種編輯器。只要慣用的編輯器都可以寫。

:-)

hexojs / hexo

[討論] 「Hexo 佈景主題的樣式」和「Brackets 的 MarkdownPreview Extension」整合的可行性 #886

hexojs / hexo

[討論] 「Hexo 佈景主題的樣式」和「Brackets 的 MarkdownPreview Extension」整合 的可行性 #886

[討論] 「Hexo 佈景主題的樣式」和「Brackets 的 MarkdownPreview Extension」整合的可行性 #886