forked from AterDev/EasyBlog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
278 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,58 @@ | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| // support mermaind | ||
| if (typeof mermaid !== 'undefined') { | ||
| mermaid.initialize({ startOnLoad: true }); | ||
| } | ||
|
|
||
| const languageDivs = document.querySelectorAll('div[class^="language-"]'); | ||
|
|
||
| const copyContent = `📋copy code`; | ||
| // 为每个代码片段添加复制图标 | ||
| languageDivs.forEach(languageDiv => { | ||
| const language = languageDiv.className.split(' ')[0].split('-')[1]; | ||
|
|
||
| const codeActionBar = document.createElement('div'); | ||
| codeActionBar.classList.add('code-action-bar', 'flex', 'justify-between'); | ||
|
|
||
| codeActionBar.innerHTML = `<span>${language}</span><span class="copy-icon">${copyContent}</span>`; | ||
| languageDiv.parentNode.insertBefore(codeActionBar, languageDiv); | ||
|
|
||
| const copyIcon = codeActionBar.querySelector('.copy-icon'); | ||
| // 点击复制图标时复制代码片段到剪贴板 | ||
| copyIcon.addEventListener('click', () => { | ||
| // 复制代码片段的内容到剪贴板 | ||
| // get pre tag element innertext from codeSnippet | ||
| const textToCopy = languageDiv.querySelector('pre').innerText; | ||
| navigator.clipboard.writeText(textToCopy) | ||
| .then(() => { | ||
| // 复制成功后将图标更改为对号 | ||
| copyIcon.innerHTML = '✓ copied!'; | ||
|
|
||
| // 2秒后恢复图标为原始状态 | ||
| setTimeout(() => { | ||
| copyIcon.innerHTML = copyContent; | ||
| }, 1000); | ||
| const mermaid = window.mermaid; | ||
| const nomnoml = window.nomnoml; | ||
| class MarkdownHandler { | ||
| copyContent = '📋copy code'; | ||
| constructor() { | ||
| document.addEventListener('DOMContentLoaded', () => this.init()); | ||
| } | ||
| init() { | ||
| this.initMermaid(); | ||
| this.initCodeCopy(); | ||
| this.initNomnoml(); | ||
| } | ||
| initMermaid() { | ||
| if (typeof mermaid !== 'undefined') { | ||
| mermaid.initialize({ startOnLoad: true }); | ||
| } | ||
| } | ||
| initCodeCopy() { | ||
| const languageDivs = document.querySelectorAll('div[class^="language-"]'); | ||
| languageDivs.forEach(languageDiv => this.addCopyIcon(languageDiv)); | ||
| } | ||
| addCopyIcon(languageDiv) { | ||
| const language = languageDiv.className.split(' ')[0].split('-')[1]; | ||
| const codeActionBar = document.createElement('div'); | ||
| codeActionBar.classList.add('code-action-bar', 'flex', 'justify-between'); | ||
| codeActionBar.innerHTML = `<span>${language}</span><span class="copy-icon">${this.copyContent}</span>`; | ||
| languageDiv.parentNode.insertBefore(codeActionBar, languageDiv); | ||
| const copyIcon = codeActionBar.querySelector('.copy-icon'); | ||
| copyIcon.addEventListener('click', () => this.copyCode(languageDiv, copyIcon)); | ||
| } | ||
| copyCode(languageDiv, copyIcon) { | ||
| const textToCopy = languageDiv.querySelector('pre').innerText; | ||
| navigator.clipboard.writeText(textToCopy) | ||
| .then(() => { | ||
| copyIcon.innerHTML = '✓ copied!'; | ||
| setTimeout(() => { | ||
| copyIcon.innerHTML = this.copyContent; | ||
| }, 1000); | ||
| }) | ||
| .catch(err => { | ||
| console.error('Failed to copy: ', err); | ||
| .catch(err => { | ||
| console.error('Failed to copy: ', err); | ||
| }); | ||
|
|
||
| }); | ||
| }); | ||
|
|
||
| var nomnomlDivs = document.querySelectorAll('.nomnoml'); | ||
| if (nomnomlDivs.length > 0) { | ||
| const nomnomlDiv = nomnomlDivs[0]; | ||
| const content = nomnomlDiv.textContent; | ||
| nomnomlDiv.innerHTML = ''; | ||
|
|
||
| const canvas = document.createElement('canvas'); | ||
| nomnoml.draw(canvas, content); | ||
| nomnomlDiv.appendChild(canvas); | ||
| } | ||
|
|
||
| }); | ||
| } | ||
| initNomnoml() { | ||
| if (typeof nomnoml !== 'undefined') { | ||
| var nomnomlDivs = document.querySelectorAll('.nomnoml'); | ||
| if (nomnomlDivs.length > 0) { | ||
| const nomnomlDiv = nomnomlDivs[0]; | ||
| const content = nomnomlDiv.textContent; | ||
| nomnomlDiv.innerHTML = ''; | ||
| const canvas = document.createElement('canvas'); | ||
| nomnoml.draw(canvas, content); | ||
| nomnomlDiv.appendChild(canvas); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| new MarkdownHandler(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> | ||
| <url> | ||
| <loc>https://aterdev.github.io/EasyBlog/blogs/introduction.html</loc> | ||
| <lastmod>2024-04-01</lastmod> | ||
| <changefreq>daily</changefreq> | ||
| <priority>0.9</priority> | ||
| </url> | ||
| <url> | ||
| <loc>https://aterdev.github.io/EasyBlog/blogs/Markdown%E6%94%AF%E6%8C%81%E7%A4%BA%E4%BE%8B.html</loc> | ||
| <lastmod>2024-04-01</lastmod> | ||
| <changefreq>daily</changefreq> | ||
| <priority>0.9</priority> | ||
| </url> | ||
| </urlset> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| // @ts-ignore | ||
| const mermaid = window.mermaid; | ||
| // @ts-ignore | ||
| const nomnoml = window.nomnoml; | ||
|
|
||
|
|
||
| class MarkdownHandler { | ||
| private copyContent: string = '📋copy code'; | ||
|
|
||
| constructor() { | ||
| document.addEventListener('DOMContentLoaded', () => this.init()); | ||
| } | ||
|
|
||
| private init(): void { | ||
| this.initMermaid(); | ||
| this.initCodeCopy(); | ||
| this.initNomnoml(); | ||
| } | ||
|
|
||
| private initMermaid(): void { | ||
|
|
||
| if (typeof mermaid !== 'undefined') { | ||
| mermaid.initialize({ startOnLoad: true }); | ||
| } | ||
| } | ||
|
|
||
| private initCodeCopy(): void { | ||
| const languageDivs = document.querySelectorAll('div[class^="language-"]'); | ||
| languageDivs.forEach(languageDiv => this.addCopyIcon(languageDiv)); | ||
| } | ||
|
|
||
| private addCopyIcon(languageDiv: Element): void { | ||
| const language = languageDiv.className.split(' ')[0].split('-')[1]; | ||
|
|
||
| const codeActionBar = document.createElement('div'); | ||
| codeActionBar.classList.add('code-action-bar', 'flex', 'justify-between'); | ||
|
|
||
| codeActionBar.innerHTML = `<span>${language}</span><span class="copy-icon">${this.copyContent}</span>`; | ||
| languageDiv.parentNode!.insertBefore(codeActionBar, languageDiv); | ||
|
|
||
| const copyIcon = codeActionBar.querySelector('.copy-icon'); | ||
| copyIcon!.addEventListener('click', () => this.copyCode(languageDiv, copyIcon)); | ||
| } | ||
|
|
||
| private copyCode(languageDiv: Element, copyIcon: Element | null): void { | ||
| const textToCopy = languageDiv.querySelector('pre')!.innerText; | ||
| navigator.clipboard.writeText(textToCopy) | ||
| .then(() => { | ||
| copyIcon!.innerHTML = '✓ copied!'; | ||
| setTimeout(() => { | ||
| copyIcon!.innerHTML = this.copyContent; | ||
| }, 1000); | ||
| }) | ||
| .catch(err => { | ||
| console.error('Failed to copy: ', err); | ||
| }); | ||
| } | ||
|
|
||
| private initNomnoml(): void { | ||
| if (typeof nomnoml !== 'undefined') { | ||
| var nomnomlDivs = document.querySelectorAll('.nomnoml'); | ||
| if (nomnomlDivs.length > 0) { | ||
| const nomnomlDiv = nomnomlDivs[0]; | ||
| const content = nomnomlDiv.textContent!; | ||
| nomnomlDiv.innerHTML = ''; | ||
|
|
||
| const canvas = document.createElement('canvas'); | ||
| nomnoml.draw(canvas, content); | ||
| nomnomlDiv.appendChild(canvas); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| new MarkdownHandler(); |
Oops, something went wrong.