2. 程式人生 > >WordPress+Markdown+為知筆記，實現高質量筆記和部落格

WordPress+Markdown+為知筆記，實現高質量筆記和部落格

阿新 • • 發佈：2019-02-14

本文寫給：和我一樣想要有一套操作容易、使用方便、相容性好的 高質量個人知識管理和部落格 實現方案的人。

需求

平時學東西時，喜歡寫一些筆記，一方面作為記錄，時間久了不記得了可以看看，另一方面發到網上或許能幫到別人。之前用CSDN，發現部落格編輯實在是非常難用，索性自己建了一個WordPress的站點，每次釋出完再複製貼上到CSDN部落格。

記筆記我用的為知筆記，為知筆記有個部落格離線釋出的功能，我在本地寫好的筆記，可以直接一鍵傳送到部落格，非常方便。但是由於相容性問題，部落格釋出後顯示效果不是那麼理想，尤其是程式碼在本地為知筆記有自己的一套程式碼高亮系統，WordPress和CSDN又分別有不同的程式碼高亮系統，釋出時還是不得不手動做不少修改。

由於前段時間有人決定開始寫部落格，然後問了我一些問題，包括部落格怎麼做到編輯方便又能很好的排版，同時可以在本地有一份方便管理的筆記，我就給他推薦了為知筆記、CSDN、WordPress還有Markdown，讓他自己瞭解下再決定。Markdown是一種實現高質量文章的好方法，由於為知筆記支援Markdown，之前我也試過，但是釋出到部落格顯示效果不是很好，而且也沒有很大需求。這次重新研究了一番，最後總結除了一套個人感覺比較好的實現高質量知識管理和部落格的方法，總結成這篇文章。

基礎知識與準備工作

為知筆記相關說明

這裡主要做幾點說明：

  • 為知筆記在筆記名後增加.md
    ，開啟後在編輯模式下為Markdown原始檔，在閱讀模式下即為經過Markdown渲染後的效果（如果不顯示渲染後的效果，可以關掉筆記重新開啟）。
  • 使用Markdown的筆記，在點擊發布到部落格時，需要勾選"使用Markdown渲染"的選項。
  • 使用Markdown渲染後釋出到WordPress的文章，只含HTML內容，不含CSS樣式。CSS樣式由WordPress主題中的style.css決定。
  • 經過對輸出HTML的分析，為知筆記Markdown中的程式碼高亮，由Google開源專案prettyprint實現。

利用為知筆記Markdown+自定義CSS，高質量程式碼編輯So Easy

前面做了大量準備工作，下面要說的就是本文的核心內容。注意如果你的WordPress用了其他程式碼高亮外掛，建議先將其停用，然後再進行操作，以免發生衝突。

我們可以用為知筆記寫一個簡單的Markdown筆記，例如：

  1. ##標題2
  2. ###標題3
  3. ***
  4. -列表1
  5. -列表2
  6. ***
  7. ```
  8. #include <stdio.h>
  9. int main() {
  10.     printf("Hello World!\n");
  11.     return 0;
  12. }
  13. ```

儲存為test.md，即可在為知筆記中看到渲染後的效果。

將其釋出到WordPress部落格，檢視網頁原始碼，可以看到為知筆記輸出的HTML結果：

  1. <h2id="-2">標題2</h2>
  2. <h3id="-3">標題3</h3>
  3. <hr>
  4. <ul>
  5. <li>列表1</li>
  6. <li>列表2</li>
  7. </ul>
  8. <hr>
  9. <preclass="prettyprint linenums language-undefined prettyprinted"style="">
  10. <olclass="linenums"style="padding-left:0px;">
  11. <listyle="list-style-type: none; padding-left:0px;"class="L0">
  12. <code><spanclass="com">#include</span><spanclass="pln"></span><spanclass="str"><stdio.h></span></code>
  13. </li>
  14. <listyle="list-style-type: none; padding-left:0px;"class="L1"><code></code></li>
  15. <listyle="list-style-type: none; padding-left:0px;"class="L2">
  16. <code><spanclass="kwd">int</span><spanclass="pln"> main</span><spanclass="pun">()</span><spanclass="pln"></span><spanclass="pun">{</span></code>
  17. </li>
  18. <listyle="list-style-type: none; padding-left:0px;"class="L3">
  19. <code><spanclass="pln">    printf</span><spanclass="pun">(</span><spanclass="str">"Hello World!\n"</span><spanclass="pun">);</span></code>
  20. </li>
  21. <listyle="list-style-type: none; padding-left:0px;"class="L4">
  22. <code><spanclass="pln"></span><spanclass="kwd">return</span><spanclass="pln"></span><spanclass="lit">0</span><spanclass="pun">;</span></code>
  23. </li>
  24. <listyle="list-style-type: none; padding-left:0px;"class="L5">
  25. <code><spanclass="pun">}</span></code>
  26. </li>
  27. </ol>
  28. </pre>

但是我們看到的顯示效果可能並不好，原因在於我們的WordPress主題中的CSS沒有針對Markdown進行優化完善。下面的問題就很簡單了，就是改CSS。根據個人喜好，網站風格等，將CSS進行修改完善，也就是修改主題中的style.css檔案。

對於h1，h2，h3，ul，ol，li，hr這些常規標籤樣式的修改，倒沒什麼問題，而且通常主題自身就含有這些標籤的樣式。要注意的是，這裡的程式碼高亮用的是prettyprint的風格，因此，我們可以下載到prettyprint外掛，並將其CSS複製到我們的CSS中。

最後經過測試，prettyprint的css還是有一些問題，可能是因為版本或是其他css的原因。經過了反覆的修改，下面給出我使用的css（程式碼高亮部分），由於不同主題中的元素差異，並不能保證在其他網站也能使用，僅供參考使用。

  1. code .pln{color:#000}
  2. code .str{color:#080}
  3. code .kwd{color:#24F}
  4. code .com{color:#78C}
  5. code .typ{color:#24F}
  6. code .lit{color
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    WordPress+Markdown+為知筆記，實現高質量筆記和部落格
    
     
     

本文寫給：和我一樣想要有一套操作容易、使用方便、相容性好的 高質量個人知識管理和部落格 實現方案的人。


需求

平時學東西時，喜歡寫一些筆記，一方面作為記錄，時間久了不記得了可以看看，另一方面發到網上或許能幫到別人。之前用CSDN，發現部落格編輯實在是非常難用，索性自己建了一個WordP 
    

    
  
 

    

    
    
    
    Docker學習筆記_下載鏡像更換為國內源，實現快速下載image
    
     
     art   com   mon   iyu   http   image   .cn   內容   mirrors   1、編輯/etc/docker/daemon.json，增加下面內容：
{
"registry-mirrors": ["https://registry.docker-cn.com"] 
} 
    

    
  
 

    

    
    
    
    ThinkPHP 3.2 性能優化，實現高性能API開發
    
     
     req   同步失敗   pro   緩解   think   復雜   壓縮   後臺   edi   

需求分析
目前的業務全站使用ThinkPHP 3.2.3，前臺、後臺、Cli、Api等。目前的業務API訪問量數千萬，後端7臺PHP 5.6，平均CPU使用率20%。
測試數據

真實業務 
    

    
  
 

    

    
    
    
    要將大數據和分析轉變為競爭優勢，實現業務轉型，必須做到這三點！
    
     
     流程優化   運營商   競爭對手   傳感器   吸引力   所謂大數據（Big Data）是指不使用隨機分析法（抽樣調查）的捷徑，而是采用對所有數據進行分析處理。它代表著需要新處理模式才能具有更強的決策力、洞察力和流程優化能力的海量、高增長率和多樣化的信息資產。大數據的特點：4VVolume（大量）、Ve 
    

    
  
 

    

    
    
    
    家裡寬頻升級為200M光纖，換千兆路由和千兆網線能實現提速嗎？
    
     
      
 
 目前已經更換了千兆光貓，是不是還需要換個千兆的路由和千兆的網線就能實現手機提速(不考慮電腦，路由也是手機設定的) 。另外電腦網絡卡是百兆的，想買一個外接USB的千兆網絡卡，不知道能否實現理論100多兆的網速，我想肯定是達不到200兆的，目前只有本地連線顯示的網速只有50兆。 
  
 光貓，路由器， 
    

    
  
 

    

    
    
    
    Python解密網易雲音樂.ncm檔案，將.ncm檔案轉換為.mp3檔案，實現隨處播放（另附C++已編譯轉換器）
    
     
      
 
 網易雲音樂把.mp3音樂檔案加密為.ncm檔案，導致不能將下載好的音樂複製到其它裝置或使用非網易雲音樂播放器播放，該程式可將.ncm檔案逆向解密為.mp3檔案並保留最高音質。 
 另有C++已編譯.exe轉換器，將.ncm檔案拖到.exe上直接執行轉換，生成.mp3檔案在.ncm檔案相同路徑。點選下 
    

    
  
 

    

    
    
    
    安卓仿知乎個人主頁，實現巢狀滑動和漸隱效果
    
     
     
							
							
							本篇文章已經授權微信公共號guolin_blog(郭霖)獨家釋出




先看知乎的效果：



再看我們實現的效果：



網上也有很多巢狀滑動的例子，先說說我這個的優點。 
1.頭部可以參與滑動 
2.下面可以加viewpager 
3.支援Recycler 
    

    
  
 

    

    
    
    
    【Lua學習筆記】 Lua中實現面向物件，轉自雲風的部落格
    
     
     local _class={}
 
function class(super)
	local class_type={}
	class_type.ctor=false
	class_type.super=super
	class_type.new=function(...) 
			local obj={}
 
    

    
  
 

    

    
    
    
    ElasticSearch群集搭建介紹，實現高可用
    
     
     
                                        
                                                ElasticSearch簡介： 
ElasticSearch 是一個分散式、高擴充套件、高實時的搜尋與資料分析引擎。它能很方便的 
    

    
  
 

    

    
    
    
    java學習筆記(中級篇)—java實現高質量圖片壓縮
    
     
     使用java幾十行程式碼實現一個高質量圖片壓縮程式，再也不用去自己找網路的壓縮程式啦！而且很多網上的工具還有水印或者其他的限制，自己動手寫一個簡單的應用，是再合適不過了。
一、實現原理
1、宣告兩個字串變數，分別是要壓縮圖片的路徑和壓縮後圖片的存放路徑
private String brfore_image_ 
    

    
  
 

    

    
    
    
    nginx 實現高並發和高負載
    
     
     water   avi   權重   分配   pass   必須   顯示   term   ssi   一、Nginx是如何實現高並發的
    service nginx start之後，然後輸入#ps -ef|grep nginx，會發現Nginx有一個master進程和若幹個worker進程，這些w 
    

    
  
 

    

    
    
    
    為什麽TCP在高時延和丟包的網絡中傳輸效率差?
    
     
     TCP   協議   丟包   說明：有同學私信問到，為什麽TCP在高時延和丟包的網絡中傳輸效率差? Google可以搜到很多的信息，這裏轉譯了部分IBM Aspera fasp技術白皮書的第一章節內容，作為參考。

-在這個數字世界中，數字數據的快速和可靠移動，包括全球範圍內的大規模數據傳送，對於幾乎所有行 
    

    
  
 

    

    
    
    
    制作光盤引導啟動的含ks應答文件的iso文件，實現iso文件和遠程系統鏡像倉庫的運維自動化安裝系統
    
     
     ssa   硬盤   JD   tor   requested   fonts   shanghai   rzsz   ica   （1）A機器配置如下
        mkdir /app/bootiso -pv
        cd  /app/bootiso
        cp -r /mnt/cen 
    

    
  
 

    

    
    
    
    為公司架構一套高質量的 Vue UI 元件庫
    
     
     有沒有曾遇過，產品要我們實現一個功能，但是 iview 或者 elementui 不支援，我們然後義正言辭的說，不好意思，元件庫不支援，沒法做到。 有沒有曾和設計師爭論得面紅耳赤，其實也是因為元件庫暫不支援。所以，我認為每一個前端都應該具備能為公司架構一套 UI 元件庫的能力。 
因為機緣巧合，我在 Gith 
    

    
  
 

    

    
    
    
    建立一個順序佇列，實現佇列的入隊和出隊操作。
    
     
      
 
 標頭檔案：
#ifndef seqqueue_H
#define seqqueue_H
const int queuesize=10;
class seqqueue 
{
	int rear,front;
	int data[queuesize];
public:
	seqqueue(){front 
    

    
  
 

    

    
    
    
    SSM框架整合Apache Shiro，實現安全登入驗證和許可權驗證功能
    
     
      
 
 
 第一部分 Apache Shiro的簡介  
 1、什麼是 apache shiro ： 
  Apache Shiro是一個功能強大且易於使用的Java安全框架，提供了認證，授權，加密，和會話管理 
 如同 spring security 一樣都是是一個許可權安全框架，但是與Spri 
    

    
  
 

    

    
    
    
    純前端表格控制元件SpreadJS與Java結合，實現模板上傳和下載等功能
    
     
     安裝部署: 
開發環境： 
 
  後臺伺服器端採用 Java 、SpringMVC。  
  資料儲存到 \demo_web\WEB-INF\FileDatabase.txt 檔案中，不需要依賴DB。  
  採用 Eclipse Java EE IDE for Web Develope 
    

    
  
 

    

    
    
    
    java實現windows下amr轉換為mp3（可實現微信語音和qq語音轉換）
    
     
     最近做一個專案需要將微信的語音檔案放在頁面進行播放，查了好多資料發現，web頁面直接播放並沒有一個好的解決方案，於是就想到了先將amr檔案轉換成易於在頁面播放的mp3檔案，然後在進行播放，現在將amr檔案轉化為mp3檔案的幾種方式以及踩過的坑分享一下： 
查了好多資料，總結一下，amr轉換mp3的方式有如下幾 
    

    
  
 

    

    
    
    
    如何在Xilinx FPGA中實現高質量時鐘輸出
    
     
     
                



      在xilinx的FPGA中，要實現高頻時鐘的輸出，並保證時鐘質量，最有效的方案是使用ODDR來產生。例如，需要輸出的時鐘為CLK，用CLK來驅動ODDR，讓ODDR在CLK的上升沿輸出0或1，在CLK的下降沿輸出1或0，從而產生一個時鐘脈衝CLKOUT，C 
    

    
  
 

    

    
    
    
    使用Qt Creator作為Linux IDE，實現Redis原始碼編譯和斷點除錯
    
     
     
								
								            
						
                

2、原始碼準備



我們解壓原始碼，先使用gcc編譯，主要的目的是把deps庫編譯出來

[[email protected] redis_study]# chmod -R 777 re