让 Ghost 不通过加载 js 文件来实现代码高亮

简介: 我们添加代码高亮一般都是+css +js来实现的,不过么我们既然是使用 Ghost,基于 Node.js ,我们在后台用 Markdown 书写内容,然后 Ghost 将 markdown 转为 html 代码。如果在 markdown 转为 html 这个过程中调用 prism.js 处理代码片段

我们添加代码高亮一般都是+css +js来实现的,不过么我们既然是使用 Ghost,基于 Node.js ,我们在后台用 Markdown 书写内容,然后 Ghost 将 markdown 转为 html 代码。如果在 markdown 转为 html 这个过程中调用 prism.js 处理代码片段,那生成页面只需有 CSS 样式就可实现高亮,不用引用JS文件。

安装 Prism

进入我们的 Ghost 目录,npm 安装一下 Prism,国内服务器可以使用 cnpm。

cd /data/wwwroot/mf8
npm install prismjs  

之后node_modules文件夹下会出现prismjs目录。然后我们从 Prism 官方下载支持所有语言的 js 文件覆盖 node_modules/prismjs/prism.js
然后将 css 文件上传到相关css目录,或者直接写到 main.css 里面。

{{# if post}}
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />  
{{/if}}

修改 Ghost

一、修改 /node_modules/showdown-ghost/src/showdown.js 文件。
大约在 1029 行,找到

if (language && !language.match('^language-')) {
            language = 'language-' + language;
          }

修改为,

          if (language && !language.match('^language-')) {
            language = 'language-' + language;
          }
        var className = language.split("-")[1].toLowerCase();
        var grammar = Prism.languages[className];
        codeblock = Prism.highlight(codeblock, grammar, className);*/

二、修改 /node_modules/showdown-ghost/src/extensions/highlight.js 文件。大约在 54 行。

                        return codeExtractions[y];
                    });

                    return text;

中间,也就是 return text; 上添加:

                    var regex = /<pre><code class="(.*?)">([\s\S]*?)<\/code><\/pre>/g;
                    var result;
                    var Prism = require('prismjs') ;
                    while ((result = regex.exec(text)) !== null) {
                        // get the extracted class name and code
                        var className = result[1];
                        var code      = result[2];
                        
                        // lower case the class name so case does not matter
                        className = className.toLowerCase();
                        
                        // dencode HTML entities encoded by showdown
                        // the opposite of replacements taken from showdown's _EncodeCode
                        code = code.replace(/&lt;/g,"<");
                        code = code.replace(/&gt;/g,">");
                        code = code.replace(/&amp;/g,"&");
            
                      
                        // highlight the code with prism
                        // get the grammar (language supported by prism) from the class name
                        var grammar = Prism.languages[className];
                        
                        if (!grammar) {
                            // the given class name is not a language supported by prism
                            // skip to the next code block
                            continue;
                        }
                        
                        // the class name is a valid language
                        var language = className;
                        
                        // do the highlighting
                        var highlightedCode = Prism.highlight(code, grammar, language);
                        
                        // create the new HTML with the highlighted code and language class
                        // Prism moves the language class from the <code> element to the <pre> element
                        //  so we will set the class on the <pre> element
                        var newHTML = '<pre class="language-' + language + '"><code class="language-' + language +'">' + highlightedCode + '</code></pre>';
                        
                        
                        // replace the old HTML with the new HTML
                        var oldHTML      = result[0];
                        var oldHTMLIndex = result.index;
                        
                        var beforeOldHTML = text.substring(0, oldHTMLIndex);
                        var afterOldHTML  = text.substring(oldHTMLIndex + oldHTML.length);
                        text = beforeOldHTML + newHTML + afterOldHTML;}

完成

重启 Ghost 后,有代码的文件需要重新发布一下完成重新渲染的过程。这样我们就不需要再加载 js 文件就完成了代码高亮的渲染。

本文参考:https://www.denpe.com/ghost-markdown-prismjs-code-highlight/ 并加以完善。
来自:https://www.mf8.biz/archives/13/

目录
相关文章
|
3月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
33 0
|
2月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
111 3
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
67 2
前端JS读取文件内容并展示到页面上
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
23天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
113 0
|
2月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
2月前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
3月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
Web App开发 JavaScript 前端开发
高性能JavaScript之加载和执行
JS在浏览器中的性能,可以认为是开发者所面临的最重要的可行性问题。这个问题因JS的阻塞特性变得复杂,也就是说当浏览器在执行JS代码时,不能同时做其他任何事情。事实上,大多数浏览器都使用单一进程来处理UI(用户界面)更新和JavaScript脚本执行,所以同一时刻只能做其中一件事情。
1191 0