前言

將 markdown 字串轉成 html 顯示出來，同時把目錄也提取出來一起顯示，可以使用 marked 來讀取 markdown 字串決議成 html
marked官網：https://marked.js.org/

marked

安裝

使用 marked 前需要對其進行安裝

npm install marked -s

使用

安裝好后，在使用到的頁面引入使用即可，

<template>
  <div>
    <div v-html="content"></div>
  </div>
</template>

<script>
import { marked } from 'marked'
export default {
   data(){
     return {
         textData: "# JavaScript高級程式設計\n## 內容簡介\n   本書是JavaScript經典圖書的新版，第4版全面、深入地介紹了JavaScript開發者必須掌握的前端開發技術，涉及JavaScript的基礎特性和高級特性，書中詳盡討論了JavaScript的各個方面，從JavaScript的起源開始，逐步講解到新出現的技術，其中重點介紹ECMAScript和DOM標準，在此基礎上，接下來的各章揭示了JavaScript的基本概念，包括類、期約、迭代器、代理，等等，另外，書中深入探討了客戶端檢測、事件、影片、表單、錯誤處理及JSON，本書同時也介紹了近幾年來涌現的重要新規范，包括Fetch API、模塊、作業者執行緒、服務執行緒以及大量新API，\n## 作者簡介\n馬特·弗里斯比（Matt Frisbie），Stealth Startup公司CTO，曾擔任谷歌公司軟體工程師，精通前端技術，擁有十余年Web開發經驗，除本書外另著有AngularJS等前端主題圖書，畢業于伊利諾伊大學厄巴納-尚佩恩分校，\n## 目錄\n### 第 1章　什么是JavaScript 1\n#### 1.1　簡短的歷史回顧 1\n#### 1.2　JavaScript實作 2\n#### 1.3　JavaScript版本 9\n#### 1.4　小結 10\n### 第 2章　HTML中的JavaScript 11\n#### 2.1　script元素 11\n#### 2.2　行內代碼與外部檔案 18\n#### 2.3　檔案模式 18\n#### 2.4　noscript元素 19\n測驗代碼\n```language\nvar a = 1;\n\nfunction fun(){\n  console.log(11111)\n}\nfun()\nconosole.log(a)\n```\n\n#### 2.5　小結 20\n### 第3章　語言基礎 21\n#### 3.1　語法 21\n#### 3.2　關鍵字與保留字 23\n#### 3.3　變數 24\n#### 3.4　資料型別 30\n#### 3.5　運算子 56\n#### 3.6　陳述句 73\n#### 3.7　函式 80\n#### 3.8　小結 82\n### 第4章　變數、作用域與記憶體 83\n#### 4.1　原始值與參考值 83\n#### 4.2　執行背景關系與作用域 87\n#### 4.3　垃圾回收 94\n#### 4.4　小結 101"
     }
   },
   computed:{
     content(){
        return marked(this.textData)
     }
   }
}
</script>

效果展示

markdown-css

marked 轉 html已實作，但是整體的樣式效果看起來和在markerdown檔案里看的有差別，那是因為還沒有引入 markerdown 的樣式，接下來需要引入樣式

安裝

npm install github-markdown-css

使用

匯入 github-markdown-css 樣式，并系結樣式

import "github-markdown-css"

<div v-html="content"  ></div>

系結樣式后，實作效果：

修改主題

如果還是覺得默認的效果不滿意，可以去這里：https://theme.typoraio.cn/ 選擇你想要的主題換上去，使用也很簡單，選擇自己想要的模板，點擊下載樣式就好了，

以上就是 markdown 字串轉成 html 并顯示了，接下來就是獲取目錄，獲取目錄視專案情況而定，因為專案需求中需要使用到目錄，所以需要生成目錄，

生成目錄

找資料時，恰好看到了這個博主的文章，生成目錄就是借鑒了這個博主，使用到了里面的一些原始碼：https://segmentfault.com/a/1190000040462508

獲取目錄

獲取文章中 h1-h6 標題，這里我選擇使用 jq 獲取，速度快

getCatalog() {
  const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
  var elements = $(':header')
  let hElements = []
  for (const key of elements) {
    if (h.indexOf(key.localName) > -1) {
      let text
      if (key.children && key.children.length) {
        text = this.getText(key.children)
      } else {
        text = key.innerHTML
      }
      hElements.push({
        hLevel: parseInt(key.localName[1]),
        text,
        id: key.localName,
        uuid: key.id,
      })
    }
  }
  console.log('hElements:', hElements)
},
  
getText() {
  let result = null
  if (!arr.length) return
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].children && arr[i].children.length) {
      result = this.getText(arr[i].children)
    } else {
      result = arr[i].innerHTML
    }
  }
  return result
},

獲取到的資料是這樣子的：

完成以上操作后，拿到 hElements 陣列，處理資料，方便樹形插件顯示

toTree(flatArr) {
  var tree = []
  var copyArr = flatArr.map(function (item) {
    return item
  })

  // 根據指定級別查找該級別的子孫級，并洗掉掉已經查找到的子孫級
  var getChildrenByLevel = function (currentLevelItem, arr, level) {
    if (!currentLevelItem) {
      return
    }
    // 將level值轉成負數，再進行比較
    var minusCurrentLevel = -currentLevelItem.hLevel
    var children = []
    for (var i = 0, len = arr.length; i < len; i++) {
      var levelItem = arr[i]
      if (-levelItem.hLevel < minusCurrentLevel) {
        children.push(levelItem)
      } else {
        // 只找最近那些子孫級
        break
      }
    }
    // 從陣列中洗掉已經找到的那些子孫級，以免影響到其他子孫級的查找
    if (children.length > 0) {
      arr.splice(0, children.length)
    }
    return children
  }

  var getTree = function (result, arr, level) {
    // 首先將陣列第一位移除掉，并添加到結果集中
    var currentItem = arr.shift()

    currentItem.level = level
    result.push(currentItem)
    while (arr.length > 0) {
      if (!currentItem) {
        return
      }
      // 根據當前級別獲取它的子孫級
      var children = getChildrenByLevel(currentItem, arr, level)
      // 如果當前級別沒有子孫級則開始下一個
      if (children.length == 0) {
        currentItem = arr.shift()
        currentItem.level = level
        if (currentItem) {
          result.push(currentItem)
        }
        continue
      }
      currentItem.children = []
      // 查找到的子孫級繼續查找子孫級
      getTree(currentItem.children, children, level + 1)
    }
  }
  getTree(tree, copyArr, 1)
  return tree
},

最終的實作效果：

代碼高亮

檔案中的代碼部分是沒有高亮的，需添加代碼高亮，

這里使用到 highlight.js 插件
highlight.js官網地址：https://highlightjs.org/

安裝 highlight.js

npm install highlight.js -S

使用

import hljs from 'highlight.js'

//引入一種語法的高亮 【注意】要引入這個css 不然可能會失效
import 'highlight.js/styles/atom-one-light.css' 
// 高亮語法
hljs.highlightAll()

效果展示：

點擊目錄跳轉

這里有兩種方式：a標簽的錨點定位和 scrollIntoView() 方法

錨點定位

點擊后跳轉到指定標題，沒有影片效果

<a  :href="https://www.cnblogs.com/clownblogs/archive/2022/08/13/`#${data.uuid}`">
  {{ data.text }}
</a>

scrollIntoView() 方法

點擊跳轉后有平滑效果

<div @click="toDiv(data.uuid)">{{ data.text }}</div>

...

toDiv(uuid) {
  document.getElementById(uuid).scrollIntoView({
    behavior: 'smooth',
  })
},

原始碼

<template>
	<div >
		<el-tree  ref="tree" node-key="uuid" :data="https://www.cnblogs.com/clownblogs/archive/2022/08/13/treeData" :props="defaultProps" default-expand-all>
			<div  slot-scope="{ node, data }">
				<div @click="toDiv(data.uuid)">{{ data.text }}</div>
				<!-- <a  :href="https://www.cnblogs.com/clownblogs/archive/2022/08/13/`#${data.uuid}`">
					{{ data.text }}
				</a> -->
			</div>
		</el-tree>
		<div v-html="content" ></div>
	</div>
</template>

<script>
	import "github-markdown-css"
	import hljs from 'highlight.js'
	import 'highlight.js/styles/atom-one-light.css' //引入一種語法的高亮
	import {
		marked
	} from 'marked'
	export default {
		data() {
			return {
				treeData: [],
				defaultProps: {
					label: 'text',
					children: 'children',
				},
				textData: "# JavaScript高級程式設計\n## 內容簡介\n   本書是JavaScript經典圖書的新版，第4版全面、深入地介紹了JavaScript開發者必須掌握的前端開發技術，涉及JavaScript的基礎特性和高級特性，書中詳盡討論了JavaScript的各個方面，從JavaScript的起源開始，逐步講解到新出現的技術，其中重點介紹ECMAScript和DOM標準，在此基礎上，接下來的各章揭示了JavaScript的基本概念，包括類、期約、迭代器、代理，等等，另外，書中深入探討了客戶端檢測、事件、影片、表單、錯誤處理及JSON，本書同時也介紹了近幾年來涌現的重要新規范，包括Fetch API、模塊、作業者執行緒、服務執行緒以及大量新API，\n## 作者簡介\n馬特·弗里斯比（Matt Frisbie），Stealth Startup公司CTO，曾擔任谷歌公司軟體工程師，精通前端技術，擁有十余年Web開發經驗，除本書外另著有AngularJS等前端主題圖書，畢業于伊利諾伊大學厄巴納-尚佩恩分校，\n## 目錄\n### 第 1章　什么是JavaScript 1\n#### 1.1　簡短的歷史回顧 1\n#### 1.2　JavaScript實作 2\n#### 1.3　JavaScript版本 9\n#### 1.4　小結 10\n### 第 2章　HTML中的JavaScript 11\n#### 2.1　script元素 11\n#### 2.2　行內代碼與外部檔案 18\n#### 2.3　檔案模式 18\n#### 2.4　noscript元素 19\n測驗代碼\n``` javascript\nvar a = 1;\n\nfunction fun(){\n  console.log(11111)\n}\nfun()\nconosole.log(a)\n```\n\n#### 2.5　小結 20\n### 第3章　語言基礎 21\n#### 3.1　語法 21\n#### 3.2　關鍵字與保留字 23\n#### 3.3　變數 24\n#### 3.4　資料型別 30\n#### 3.5　運算子 56\n#### 3.6　陳述句 73\n#### 3.7　函式 80\n#### 3.8　小結 82\n### 第4章　變數、作用域與記憶體 83\n#### 4.1　原始值與參考值 83\n#### 4.2　執行背景關系與作用域 87\n#### 4.3　垃圾回收 94\n#### 4.4　小結 101"
			}
		},
		created() {
			this.$nextTick(() => {
				this.getCatalog()
				hljs.highlightAll()
			})
		},
		computed: {
			content() {
				return marked(this.textData)
			}
		},
		methods: {
			// 根據內容獲取目錄
			getCatalog() {
				const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
				var elements = $(':header')
				let hElements = []
				for (const key of elements) {
					if (h.indexOf(key.localName) > -1) {
						let text
						if (key.children && key.children.length) {
							text = this.getText(key.children)
						} else {
							text = key.innerHTML
						}
						hElements.push({
							hLevel: parseInt(key.localName[1]),
							text,
							id: key.localName,
							uuid: key.id,
						})
					}
				}
				// console.log('hElements:', hElements)
				let result = this.toTree(hElements)
				this.treeData = https://www.cnblogs.com/clownblogs/archive/2022/08/13/result

				// 目錄默認選中第一個
				this.$nextTick(() => {
					if (!result) return
					this.$refs.tree.setCurrentKey(result[0].uuid)
				})
				// console.log('result:', result)
			},
			toTree(flatArr) {
				var tree = []
				var copyArr = flatArr.map(function(item) {
					return item
				})

				// 根據指定級別查找該級別的子孫級，并洗掉掉已經查找到的子孫級
				var getChildrenByLevel = function(currentLevelItem, arr, level) {
					if (!currentLevelItem) {
						return
					}
					// 將level值轉成負數，再進行比較
					var minusCurrentLevel = -currentLevelItem.hLevel
					var children = []
					for (var i = 0, len = arr.length; i < len; i++) {
						var levelItem = arr[i]
						if (-levelItem.hLevel < minusCurrentLevel) {
							children.push(levelItem)
						} else {
							// 只找最近那些子孫級
							break
						}
					}
					// 從陣列中洗掉已經找到的那些子孫級，以免影響到其他子孫級的查找
					if (children.length > 0) {
						arr.splice(0, children.length)
					}
					return children
				}

				var getTree = function(result, arr, level) {
					// 首先將陣列第一位移除掉，并添加到結果集中
					var currentItem = arr.shift()

					currentItem.level = level
					result.push(currentItem)
					while (arr.length > 0) {
						if (!currentItem) {
							return
						}
						// 根據當前級別獲取它的子孫級
						var children = getChildrenByLevel(currentItem, arr, level)
						// 如果當前級別沒有子孫級則開始下一個
						if (children.length == 0) {
							currentItem = arr.shift()
							currentItem.level = level
							if (currentItem) {
								result.push(currentItem)
							}
							continue
						}
						currentItem.children = []
						// 查找到的子孫級繼續查找子孫級
						getTree(currentItem.children, children, level + 1)
					}
				}
				getTree(tree, copyArr, 1)
				return tree
			},
			getText() {
				let result = null
				if (!arr.length) return
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].children && arr[i].children.length) {
						result = this.getText(arr[i].children)
					} else {
						result = arr[i].innerHTML
					}
				}

				return result
			},
			toDiv(uuid) {
				document.getElementById(uuid).scrollIntoView({
					behavior: 'smooth',
				})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		/* padding: 30px; */
		overflow: hidden;
		height: 100vh;
	}

	.tree {
		margin-right: 15px;
		overflow-y: auto;
		width: 280px;
		flex-shrink: 0;
	}

	.html-content {
		overflow-y: auto;
	}
</style>

最終效果

感謝這個大佬的分享：https://segmentfault.com/a/1190000040462508

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501814.html

標籤：其他

上一篇：axios實作無感重繪

下一篇：state宣告式

vue 將markdown字串轉html、修改主題、生成目錄

前言