整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          第 09 篇：讓博客支持 Markdown 語法和代碼高亮
          
        
           
          
	
	
          
		
                        
          者：HelloGitHub-追夢人物
          文中涉及的示例代碼，已同步更新到HelloGitHub-Team 倉庫[1]
          為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語法來書寫博文。Markdown 是一種 HTML 文本標記語言，只要遵循它約定的語法格式，Markdown 的解析工具就能夠把 Markdown 文檔轉換為標準的 HTML 文檔，從而使文章呈現更加豐富的格式，例如標題、列表、代碼塊等等 HTML 元素。由于 Markdown 語法簡單直觀，不用超過 5 分鐘就可以輕松掌握常用的標記語法，因此大家青睞使用 Markdown 書寫 HTML 文檔。下面讓我們的博客也支持使用 Markdown 寫作。
          安裝 Python Markdown
          將 Markdown 格式的文本解析成標準的 HTML 文檔是一個復雜的工程，好在已有好心人幫我們完成了這些工作，直接拿來使用即可。首先安裝 Markdown，這是一個 Python 第三方庫，在項目根目錄下運行命令 pipenv install markdown。
          在 detail 視圖中解析 Markdown 
          將 Markdown 格式的文本解析成 HTML 文本非常簡單，只需調用這個庫的 markdown 方法。我們書寫的博客文章內容存在 Post 的 body 屬性里，回到我們的詳情頁視圖函數，對 post 的 body 的值做一下解析，把 Markdown 文本轉為 HTML 文本再傳遞給模板：
          blog/views.py

import markdown
from django.shortcuts import get_object_or_404, render

from .models import Post

def detail(request, pk): 
	post = get_object_or_404(Post, pk=pk) 
	post.body = markdown.markdown(post.body, 
								extensions=[ 
									'markdown.extensions.extra', 
									'markdown.extensions.codehilite', 
									'markdown.extensions.toc', 
								]) 
	return render(request, 'blog/detail.html', context={'post': post})

          這樣我們在模板中顯示 {{ post.body }} 的時候，就不再是原始的 Markdown 文本了，而是解析過后的 HTML 文本。注意這里我們給 markdown 解析函數傳遞了額外的參數 extensions，它是對 Markdown 語法的拓展，這里使用了三個拓展，分別是 extra、codehilite、toc。extra 本身包含很多基礎拓展，而 codehilite 是語法高亮拓展，這為后面的實現代碼高亮功能提供基礎，而 toc 則允許自動生成目錄（在以后會介紹）。
          來測試一下效果，進入后臺，這次我們發布一篇用 Markdown 語法寫的測試文章看看，你可以使用以下的 Markdown 測試代碼進行測試，也可以自己書寫你喜歡的 Markdown 文本。假設你是 Markdown 新手請參考一下這些教程，一定學一下，保證你可以在 5 分鐘內掌握常用的語法格式，而以后對你寫作受用無窮。可謂充電 5 分鐘，通話 2 小時。以下是我學習中的一些參考資料：
          ?Markdown——入門指南[2]
          ?Markdown 語法說明[3]
          # 一級標題

## 二級標題

### 三級標題

- 列表項1
- 列表項2
- 列表項3

> 這是一段引用

```python
def detail(request, pk): 
	post = get_object_or_404(Post, pk=pk) 
	post.body = markdown.markdown(post.body, 
								extensions=[ 
									'markdown.extensions.extra', 
									'markdown.extensions.codehilite', 
									'markdown.extensions.toc', 
								]) 
	return render(request, 'blog/detail.html', context={'post': post})?
```

          如果你發現無法顯示代碼塊，即代碼無法換行，請檢查代碼塊的語法是否書寫有誤。代碼塊的語法如上邊的測試文本中最后一段所示。
          你可能想在文章中插入圖片，目前能做的且推薦做的是使用外鏈引入圖片。比如將圖片上傳到七牛云這樣的云存儲服務器，然后通過 Markdown 的圖片語法將圖片引入。Markdown 引入圖片的語法為：![圖片說明](圖片鏈接)。
          safe 標簽
          我們在發布的文章詳情頁沒有看到預期的效果，而是類似于一堆亂碼一樣的 HTML 標簽，這些標簽本應該在瀏覽器顯示它自身的格式，但是 django 出于安全方面的考慮，任何的 HTML 代碼在 django 的模板中都會被轉義（即顯示原始的 HTML 代碼，而不是經瀏覽器渲染后的格式）。為了解除轉義，只需在模板變量后使用 safe 過濾器即可，告訴 django，這段文本是安全的，你什么也不用做。在模板中找到展示博客文章內容的 {{ post.body }} 部分，為其加上 safe 過濾器：{{ post.body|safe }}，大功告成，這下看到預期效果了。
          safe 是 django 模板系統中的過濾器（Filter），可以簡單地把它看成是一種函數，其作用是作用于模板變量，將模板變量的值變為經過濾器處理過后的值。例如這里 {{ post.body|safe }}，本來 {{ post.body }}經模板系統渲染后應該顯示 body 本身的值，但是在后面加上 safe 過濾器后，渲染的值不再是 body 本身的值，而是由 safe 函數處理后返回的值。過濾器的用法是在模板變量后加一個 | 管道符號，再加上過濾器的名稱。可以連續使用多個過濾器，例如 {{ var|filter1|filter2 }}。
          代碼高亮
          程序員寫博客免不了要插入一些代碼，Markdown 的語法使我們容易地書寫代碼塊，但是目前來說，顯示的代碼塊里的代碼沒有任何顏色，很不美觀，也難以閱讀，要是能夠像代碼編輯器里一樣讓代碼高亮就好了。
          代碼高亮我們借助 js 插件來實現，其原理就是 js 解析整個 html 頁面，然后找到代碼塊元素，為代碼塊中的元素添加樣式。我們使用的插件叫做 highlight.js 和 highlightjs-line-numbers.js，前者提供基礎的代碼高亮，后者為代碼塊添加行號。
          首先在 base.html 的 head 標簽里引入代碼高亮的樣式，有多種樣式供你選擇，這里我們選擇 GitHub 主題的樣式。樣式文件直接通過 CDN 引入，同時在 style 標簽里自定義了一點元素樣式，使得代碼塊的顯示效果更加完美。
          <head> 
	... 
	<link  rel="stylesheet"> 

	<style> 
		.codehilite { 
		padding: 0; 
		} 

		/* for block of numbers */ 
		.hljs-ln-numbers { 
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none; 

			text-align: center; 
			color: #ccc; ~
			color: #ccc; 
			border-right: 1px solid #CCC; 
			vertical-align: top; 
			padding-right: 5px; 
		} 
		.hljs-ln-n { 
			width: 30px; 
		} 

		/* for block of code */ 
		.hljs-ln .hljs-ln-code { 
			padding-left: 10px; 
			white-space: pre; 
		} 
</style>
</head>

          然后是引入 js 文件，因為應該等整個頁面加載完，插件再去解析代碼塊，所以把 js 文件的引入放在 body 底部：
          <body> 
	<script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script> 
	<script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script> 
	<script> 
		hljs.initHighlightingOnLoad(); 
		hljs.initLineNumbersOnLoad(); 
</script>
</body>

          非常簡單，通過 CDN 引入 highlight.js 和 highlightjs-line-numbers.js，然后初始化了兩個插件。再來看下效果，非常完美！
          References
          [1] HelloGitHub-Team 倉庫: https://github.com/HelloGitHub-Team/HelloDjango-blog-tutorial
           [2] Markdown——入門指南: http://www.jianshu.com/p/1e402922ee32/
           [3] Markdown 語法說明: http://www.appinn.com/markdown/
          歡迎關注 HelloGitHub 公眾號，獲取更多開源項目的資料和內容
          『講解開源項目系列』啟動——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎聯系我們給我們投稿，讓更多人愛上開源、貢獻開源～ 
          avaScript奇淫技巧：命令行語法高亮
          本文，將實現命令行輸出帶有語法高亮、帶行號的JS代碼。
          效果如下圖所示：
          對于JS程序員而言，這個效果是有些驚喜的。
          而實現起來，卻似乎是出乎意料的簡單。
          直接上源碼：
          var js_code = `
          function get_copyright(){
           
          近項目做暈頭，一個接一個，其中遇到這樣的一個功能，在網頁中高亮關鍵字的實現方法，下面小編把實現代碼及解決方案分享給大家，感興趣的的朋友跟隨小編一起看看吧
          最近做項目遇到這樣的一個功能：在網頁中高亮關鍵字。
          本以為一個 innerHTML replace 就能實現的簡單操作，卻遇到了許多的問題。本文就記錄這些問題和最終的完美解決辦法， 希望能對有同樣遭遇的小伙伴有所幫助。只對結果感興趣的，忽略過程，直接跳過看結果吧~
          常用做法：正則替換
          思路：要想高亮元素，那么需要將關鍵字提取出來用標簽包裹，然后對標簽進行樣式調整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。
          const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,"<b class="a">"+keyword+"</b>")
element.classList.add("highlight")

          這樣做存在的隱患有如下：
          ()\
div
<div id="parent">
 <div class="test">test</div>
 </div>

          關鍵字父節點 element 通過 class 來進行背景染色處理，對原始DOM有一定程度污染，可能對 element 再次定位造成影響。（作為插件希望盡可能少改變原始DOM）
          正則優化一：僅處理位于標簽內的元素
          var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 轉義處理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于標簽內的文本，避免誤操作 class、id 等
 
element.innerHTML = element.innerHTML.replace(finder,function(matched){
 return matched.replace(text,"<br>"+text+</br>)
})// 對提取的標簽內文本進行關鍵字替換

          以能解決大多數問題，但依舊存在的問題是,只要標簽屬性存在類似 < 符號，將會打破匹配規則導致正則提取內容錯誤, HTML5 dataset 可以自定義任意內容，故這些特殊字符是無法避免的。
          <div dataset="p>d">替換</div>

          正則優化二：清除可能影響的標簽
          <div id="keyword">keyword</div>
 =》將閉合標簽用變量替換
 [replaced1]keyword[replaced2]//閉合標簽內 id="keyword" 不會被處理
 =》
 [replaced1]<b>keyword</b>[replaced2]
 =》將暫存變量 replaced 替換為原先標簽
 <div id="keyword"><b>keyword</b></div>

          • 這種思路及源碼從這里來， 但存在問題是：
          • 如果 [replaced1] 包含 keyword, 那么替換時將發生異常
          最重要的，當標簽值中包含 <> 符號時，此方法也不能正確的提取標簽
          總之在經過了N多嘗試之后，通過正則都沒能有效的處理各種情況。然后換了個思路，不通過字符串的方式，通過節點處理。element.childNodes 可以最有效的清理標簽內的干擾信息。
          [完美解決方案]通過 DOM 節點處理
          <div id="parent">
 keyword 1
 <span id="child">
 keyword 2
 </span>
 </div>

          通過 parent.childNodes 得到所有子節點。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下： <span id="child"><b>keyword</b> 2</span> （遞歸處理：當child節點不含子節點時進行replace操作）。
          但是 keyword 1 是屬于文本節點，只能修改文本內容，無法增加 HTML，更無法單獨控制其樣式。而文本節點也不能轉換為普通節點，這也是最苦惱的事情。
          最后~，本文的重點來了，因為這個功能，讓我第一次認真接觸到了文本節點這個東西。從這里發現了Text，使用切割文本節點并替換的方式實現高亮。
          源碼以及還原高亮見源碼
          const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
 if (node.nodeType == 3) { //只處理文本節點
 const match = node.data.match(new RegExp(reg));
 if (match) {
 const highlightEl = document.createElement("b");
 highlightEl.dataset.highlight="y"
 const wordNode = node.splitText(match.index)
 wordNode.splitText(match[0].length); // 切割成前 關鍵詞 后三個Text 節點
 const wordNew = document.createTextNode(wordNode.data);
 highlightEl.appendChild(wordNew);//highlight 節點構建成功
 wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替換該文本節點
 }
 } else if (node.nodeType == 1 && node.dataset.highlight!="y"
 ) {
 for (var i = 0; i < node.childNodes.length; i++) {
 highlight(node.childNodes[i], reg);
 i++
 }
 } 
}

          總結
          以上所述是小編給大家介紹的HTML高亮關鍵字的完美解決方案，希望對大家有所幫助，
          學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
中文字幕不卡一区|
国产成人精品a视频一区|
亚洲码一区二区三区|
久久婷婷色一区二区三区|
国产成人综合精品一区|
激情一区二区三区|
亚洲欧美日韩一区二区三区
|
韩国福利影视一区二区三区|
亚洲AV香蕉一区区二区三区|
国产在线第一区二区三区|
精品一区二区三区在线视频观看
|
日产一区日产2区|
亚洲天堂一区在线|
天堂不卡一区二区视频在线观看|
成人免费一区二区三区|
99热门精品一区二区三区无码
|
一区二区三区伦理高清|
91成人爽a毛片一区二区|
国产成人av一区二区三区不卡|
久久精品国产一区二区三区|
国产精品合集一区二区三区
|
亚洲AV综合色区无码一区|
亚洲AV香蕉一区区二区三区|
久久国产高清一区二区三区|
精品熟人妻一区二区三区四区不卡|
日本免费一区二区三区最新vr|
日本中文字幕一区二区有码在线|
国产精品日韩欧美一区二区三区|
亚洲一区二区精品视频|
中文字幕乱码亚洲精品一区
|
久久se精品一区精品二区|
国模一区二区三区|
3d动漫精品一区视频在线观看|
一区二区三区福利视频|
欧美成人aaa片一区国产精品|
亚洲熟女一区二区三区|
日本一区午夜爱爱|
无码人妻av一区二区三区蜜臀
|
国产成人一区二区精品非洲|
久久久久人妻一区精品色|
中文字幕一区二区日产乱码|