iT邦幫忙

0

Markdown編輯器中，編輯、預覽、實際發文，三種都長不一樣

markdown writer
jerrythepotato 2021-10-05 21:16:30 ‧ 1311 瀏覽

  • 分享至 

  • xImage

問題

編輯文字的時候字體比較小，點預覽的時候會變大且字體不同，無法正確排版確認想要的行數和分段，這就算了，真正貼出文章的時候文章的寬度還會減小，雖然說也習慣了，但是真的挺不方便的。

比方說

  1. 編輯的時候，A段落有3.5行；預覽的時候，A段落有4行；實際文章，A段落有4.5行。
  2. 要放入程式碼時，必須要貼出文章才會知道程式碼會不會超過字數而自動換行，看預覽會比實際還寬而不準，

示意圖

編輯：
https://ithelp.ithome.com.tw/upload/images/20211005/20135197HqRY5dU2Pf.png
預覽：
https://ithelp.ithome.com.tw/upload/images/20211005/20135197M9LFeISJXD.png
文章：
https://ithelp.ithome.com.tw/upload/images/20211005/20135197XrupiAcN7i.png

這個問題困擾很久了，想了解是不是我哪邊有動到設定？

窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-06 09:35:43 檢舉
建議樓主可以自己用 STYLEBOT 之類的自訂 CSS 去改這個部分，自訂，就是自己爽，不用管別人，因為最終老實說，你自己改的部分官方不會更新上去，所以也只能這麼搞而已

當然啦，你可以嘗試去修改 編輯時跟預覽時的CSS標籤值，讓他貼近顯示在文章的時候的狀況，達到所見及所得的目的
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
Mao
iT邦研究生 5 級 ‧ 2021-10-05 22:01:32
最佳解答

因為 Markdown 語法是直接轉換成 HTML 標籤
HTML 標籤主要的功能是架構文章的內容
而控制寬度與段落行數涉及到 CSS

  • 編輯模式時，會看到 Markdown 語法
  • 預覽模式時，Markdown 語法會轉換成 HTML，CSS 則是套用預覽模式的樣式。
  • 文章模式時，CSS 則是套用了正常文章的樣式，因為正常文章的樣式有設定 padding 留白，所以字就會因為留白而自動換行。

才產生預覽效果與真實文章的呈現有差異，這部分沒辦法修改，只能看網站要不要優化這個部分。

看更多先前的回應...收起先前的回應...
jerrythepotato iT邦新手 3 級 ‧ 2021-10-06 09:08:45 檢舉

感謝回答，這樣我知道原因了，不過照這個思路的話，也就是說，可以自己設計一個陽春版的編輯器、用來正確預覽文章XD

窮嘶發發發 iT邦高手 1 級 ‧ 2021-10-06 10:09:50 檢舉

借版說明怎麼改，以回應討論為例
使用工具 STYLEBOT ( CHROME 外掛 )
原本的狀況
原本的狀況
修改後
修改後
STYLEBOT 修改的內容
修改的內容
給樓主參考了

Mao iT邦研究生 5 級 ‧ 2021-10-06 15:15:24 檢舉

這個外掛厲害了！既然預覽不一樣，那就修改到一樣！

jerrythepotato iT邦新手 3 級 ‧ 2021-10-06 16:42:29 檢舉

厲害了這個外掛，看來是第一次設定時先幫忙存好CSS檔案，每次載入相同網址的時候都會插入！這樣就不用額外作編輯器或手動修改CSS了XD

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙