增加指定程式語言功能

src/CodeBlockShape.ts

@@ -1,8 +1,13 @@
 import hljs from 'highlight.js';
-import {Utils, CodeData} from './Utils'
+import {CodeData, Utils} from './Utils'
 
 const myUtils = new Utils()
 
+type CodeBlockContent = {
+	language: string, // 程式語言
+	code: string // 具體代碼
+}
+
 class CodeBlockShape {
 
 	/**
@@ -48,7 +53,7 @@ class CodeBlockShape {
 				},
 				html() {
 					const wrap = document.createElement('div')
-					wrap.innerHTML = '<pre style="padding-left: 20px">' + hljs.highlight(codeText, {language: 'java'}).value + '</pre>'
+					wrap.innerHTML = '<pre style="padding-left: 20px">' + hljs.highlight(codeText, {language: codeDataFunc.language}).value + '</pre>'
 					return wrap
 				},
 			}
@@ -62,5 +67,6 @@ class CodeBlockShape {
 
 }
 
+export {CodeBlockShape};
+export type {CodeBlockContent};
 
-export {CodeBlockShape}

src/Graph.ts

@@ -1,5 +1,5 @@
 import {Cell, Graph, Shape} from '@antv/x6';
-import {CodeBlockShape} from './CodeBlockShape';
+import {CodeBlockContent, CodeBlockShape} from './CodeBlockShape';
 import {ClassShape} from './ClassShape';
 import {CLASS_SHAPE_ID_TAG, CODE_BLOCK_ID_TAG, CodeData, Utils} from './Utils';
 import {Edge} from './Edge'
@@ -9,7 +9,7 @@ const codeBlockShape = new CodeBlockShape()
 const classShape = new ClassShape()
 const edge = new Edge()
 
-export let initGraph = function (codeBlocks: String[]) {
+export let initGraph = function (codeBlocks: CodeBlockContent[]) {
 
 	// 創建畫布
 	const graph = new Graph({
@@ -27,7 +27,7 @@ export let initGraph = function (codeBlocks: String[]) {
 
 	// 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併
 	let codeDatas: CodeData[] = []
-	codeBlocks.forEach((codeBlock: string) => {
+	codeBlocks.forEach((codeBlock: CodeBlockContent) => {
 		let codeData: CodeData = myUtils.parseCodeData(codeBlock)
 		codeDatas.push(codeData)
 	})

src/SourceCodeView.ts

@@ -1,13 +1,14 @@
 import {ItemView, WorkspaceLeaf} from "obsidian";
 import {initGraph} from "./Graph";
 import {SOURCE_CODE_VIEW_TYPE} from "./main";
+import {CodeBlockContent} from "./CodeBlockShape";
 
 export default class SourceCodeView extends ItemView {
 
 	// 代碼塊內容 集合
-	codeBlocks: string[]
+	codeBlocks: CodeBlockContent[]
 
-	constructor(codeBlocks: string[], leaf: WorkspaceLeaf) {
+	constructor(codeBlocks: CodeBlockContent[], leaf: WorkspaceLeaf) {
 		super(leaf);
 		this.codeBlocks = codeBlocks;
 	}

src/Utils.ts

@@ -1,4 +1,5 @@
 import hljs from "highlight.js";
+import {CodeBlockContent} from "./CodeBlockShape";
 
 type CodeData = {
 	className: string, // 類名稱
@@ -6,8 +7,9 @@ type CodeData = {
 }
 
 type CodeDataFunc = {
+	language: string, // 程式語言
 	name: string, // 函數名稱
-	code: string  // 代碼塊字串
+	code: string,  // 代碼塊字串
 	calls: CodeDataFuncCall[] // 調用的函數集合
 }
 
@@ -56,17 +58,20 @@ class Utils {
 
 	/**
 	 * 根據 代碼塊字串 解析出 CodeData 對象
-	 * @param codeBlockText 代碼塊字串
 	 * @returns CodeData 對象
+	 * @param codeBlockContent 代碼塊內容
 	 */
-	public parseCodeData(codeBlockText: string): CodeData {
+	public parseCodeData(codeBlockContent: CodeBlockContent): CodeData {
+
+		const lang = codeBlockContent.language;
+		const content = codeBlockContent.code;
 
 		// 類名、方法名 的 標示符
 		const classTag = '@class'
 		const functionTag = '@function'
 		const callTag = '@call'
 
-		let codeLines = codeBlockText.split('\n')
+		let codeLines = content.split('\n')
 
 		// 取得 註釋塊 的代碼
 		let commentLines = []
@@ -119,8 +124,9 @@ class Utils {
 		let result: CodeData = {
 			className: className,
 			funcs: [{
+				language: lang,
 				name: functionName,
-				code: codeBlockText,
+				code: content,
 				calls: calls
 			}]
 		}

src/main.ts

@@ -1,12 +1,13 @@
 import {Plugin, Workspace, WorkspaceLeaf} from 'obsidian';
 import SourceCodeView from "./SourceCodeView";
+import {CodeBlockContent} from "./CodeBlockShape";
 
 
 export const SOURCE_CODE_VIEW_TYPE = 'source-code-view'
 export default class SourceCodeViewPlugin extends Plugin {
 
 	// Obsidian 中 Markdown 的 代碼塊內容 集合
-	codeBlocks: string[] = []
+	codeBlockContents: CodeBlockContent[] = []
 
 	/**
 	 * 載入插件時，註冊相關組件
@@ -16,7 +17,7 @@ export default class SourceCodeViewPlugin extends Plugin {
 		// 註冊 Obsidian 的 View
 		this.registerView(
 			SOURCE_CODE_VIEW_TYPE,
-			(leaf: WorkspaceLeaf) => (new SourceCodeView(this.codeBlocks, leaf))
+			(leaf: WorkspaceLeaf) => (new SourceCodeView(this.codeBlockContents, leaf))
 		);
 
 		// 註冊 Obsidian 左側的按鈕
@@ -44,20 +45,20 @@ export default class SourceCodeViewPlugin extends Plugin {
 		this.app.vault.process(activeFile, (data) => {
 
 			// 清理數據
-			this.codeBlocks = []
+			this.codeBlockContents = []
 
 			// 獲取文件內所有的 Markdown 代碼塊
 			const regex = /```(\w+)\s([\s\S]*?)```/gm;
 			let match;
 			while ((match = regex.exec(data)) !== null) {
 				const lang = match[1]; // 程式語言
-				const codeBlockData = match[2]; // 代碼塊內容
-				this.codeBlocks.push(codeBlockData)
+				const content = match[2]; // 代碼塊內容
+				this.codeBlockContents.push({language: lang, code: content})
 			}
 
 			// 開啟分頁
 			const preview = this.app.workspace.getLeaf('split', 'vertical')
-			const mmPreview = new SourceCodeView(this.codeBlocks, preview);
+			const mmPreview = new SourceCodeView(this.codeBlockContents, preview);
 			preview.open(mmPreview)
 
 			// 不更改文件內容