您现在的位置是:首页 > 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网站模板本模板基于PbootCMS内核开发,为不锈钢及金属制品企业量身打造。采用响应式设计,适配PC与移动设备,提供统一后台管理体验,数据实时同步更新。查看源码
  • (自适应)蓝色沙盘复古建筑模型制作网站模板源码下载为建筑沙盘模型企业设计的响应式网站模板,通过三维空间展示技术结合产品参数可视化,有效提升模型作品的线上呈现效果与客户咨询转化率。查看源码
  • (PC+WAP)企业管理工程造价资产评估财务审计带留言网站模板本模板基于PbootCMS内核开发,为工程造价咨询、财务审计类企业量身打造,同时支持多行业快速适配。采用PC+WAP双端同步设计,数据实时互通,助您高效展示企业形象与服务能力。查看源码
  • (响应式)企业管理人力资源服务类pbootcms模板源码下载为人力资源服务及企业管理设计的响应式网站模板,基于PbootCMS内核开发。通过宽屏布局优化岗位展示效果,简洁界面聚焦人才服务核心业务,自适应技术确保在PC端与手机端查看源码
分享笔记 (共有 篇笔记)
验证码: