diff --git a/src/CodeBlockShape.ts b/src/CodeBlockShape.ts index 5ac6a0c..fec38aa 100644 --- a/src/CodeBlockShape.ts +++ b/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 = '
' + hljs.highlight(codeText, {language: 'java'}).value + ''
+ wrap.innerHTML = '' + hljs.highlight(codeText, {language: codeDataFunc.language}).value + ''
return wrap
},
}
@@ -62,5 +67,6 @@ class CodeBlockShape {
}
+export {CodeBlockShape};
+export type {CodeBlockContent};
-export {CodeBlockShape}
diff --git a/src/Graph.ts b/src/Graph.ts
index 1dfab3d..51f48a6 100644
--- a/src/Graph.ts
+++ b/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)
})
diff --git a/src/SourceCodeView.ts b/src/SourceCodeView.ts
index c63649b..d1f27e3 100644
--- a/src/SourceCodeView.ts
+++ b/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;
}
diff --git a/src/Utils.ts b/src/Utils.ts
index 5d1dd03..2b49407 100644
--- a/src/Utils.ts
+++ b/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
}]
}
diff --git a/src/main.ts b/src/main.ts
index 9e45ba5..1c70a7f 100644
--- a/src/main.ts
+++ b/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)
// 不更改文件內容