您现在的位置是:首页 > cms教程 > 帝国CMS教程帝国CMS教程

帝国cms编辑器代码高亮的方法,帝国cms编辑器怎么代码高亮

绿春2023-05-05帝国CMS教程已有人查阅

导读帝国cms编辑器中使用代码高亮的方法,教大家如何在帝国cms编辑器中整合highlight。1.首先下载highlight

帝国cms编辑器中使用代码高亮的方法,教大家如何在帝国cms编辑器中整合highlight。
1.首先下载highlight
下载地址:https://highlightjs.org/download/
下载解压后styles文件夹里面是风格样式。
2.接下来开始整合到编辑器 
在/e/admin/ecmseditor/infoeditor/styles.js 代码中添加

{ name: 'Preformatted Text',element: 'pre' },

添加完后编辑器样式会多出一个Preformatted Text选项
在我们需要使用代码高亮的地方使用Preformatted Text样式。
3.在需要使用代码高亮的模板中引入highlight。 可以调整样式在styles文件中,我们这里使用的是tomorrow-night-eighties.CSS样式。

<link rel="stylesheet" type="text/css" href="[!--news.url--]skin/web/css/tomorrow-night-eighties.css" /> 
<script type="text/javascript" src='[!--news.url--]skin/web/js/highlight.js'></script> //放在模板最底部 
<script type="text/javascript"> hljs.initHighlightingOnLoad(); var allpre = document.getElementsByTagName("pre"); for(i = 0; i < allpre.length; i++) { var onepre = document.getElementsByTagName("pre")[i]; var mycode = document.getElementsByTagName("pre")[i].innerHTML; onepre.innerHTML = '<code id="mycode">'+mycode+'</code>'; } </script>

本文标签:

很赞哦! ()

相关源码

  • (自适应)餐饮小吃火锅加盟pbootcms模板源码下载本模板基于PbootCMS系统开发,为火锅餐饮、小吃加盟等餐饮企业打造。采用响应式设计,适配各类移动设备,帮助餐饮企业展示特色菜品、加盟政策和服务优势。查看源码
  • (自适应)蓝色环保科技设备带三级栏目网站模板下载该模板为环保科技企业设计,提供专业的产品展示与技术服务平台。采用响应式布局,适配环保设备、清洁技术等应用场景,通过可视化后台可快速搭建符合行业特性的展示网站。查看源码
  • 响应式pbootcms模板新闻资讯博客自媒体门户网站行业通用解决方案为新闻资讯、自媒体博客打造的响应式网站模板,同时支持企业门户、行业资讯等多场景快速适配。通过简单的图文替换即可实现跨行业转型,显著降低建站成本。查看源码
  • (自适应)绿色农业机械设备农场网站源码下载为现代农业机械领域打造的响应式网站模板,采用PbootCMS内核开发,数据实时同步后台管理。通过简洁大气的视觉设计,有效展示农机产品技术参数与应用场景,帮助客户快速建立专业数字化形象。查看源码
  • (PC+WAP)绿色环保设备环保企业网站模板源码下载基于PbootCMS内核开发的响应式企业模板,为环保设备制造、环境技术服务等企业打造,通过模块化设计实现多行业快速适配。查看源码
  • (PC+WAP)家居装饰家装建材营销型网站pbootcms模板下载本模板基于PbootCMS开发,主要服务于家居装饰、建材及相关行业。采用现代化设计风格,同时适配PC和移动设备访问。模板结构清晰,突出展示家装案例和建材产品,帮助企业在线上建立专业形象,有效展示产品与服务优势。查看源码
分享笔记 (共有 篇笔记)
验证码: