澳门新葡萄京娱乐场 2

澳门新葡萄京娱乐场帝国CMS

使用百度编辑器,后台编辑信息添加代码正常高亮,但是网站前台却不高亮。

SyntaxHighlighter 是 Google Code
上的一个开源项目,主要用于给网页前端的代码着色。Google
的“尿性”,就是一切从简,从实际解决问题,他支持常见的所有语言,而且附送多款皮肤,并且基于HTML和JS,他对Web
2.0 Web 3.0的友好度非常高。

集成后的功能如下:

  1. 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  2. 代码高亮 程序员最爱,需要在前台做代码高亮
  3. 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将
    markdown 代码保存下来,以便下次继续编辑。

这是因为前台没有引用相关CSS文件的原因。

官方:

集成步骤

  1. 下载 marked.js 和 makemarkdown.js
  2. 将下好的两个文件放倒对应主题下面的 js 目录下

marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js
用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

  1. 把下面的代码复制到function.php

// 增加 markdown 功能到后台编辑器
add_action( 'admin_menu', 'create_markdown' );
add_action( 'save_post', 'save_markdown', 10, 2 );

function create_markdown() {
    add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
}

function markdown_html( $object, $box ) { ?>
        <textarea name="markdown" id="markdown" 
cols="60" oninput ="markdownEditorChanged()" 
rows="50" style="width: 100%; height:100%">
            <?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?>
        </textarea>
<?php }
function save_markdown( $post_id, $post ) {
    if ( !current_user_can( 'edit_post', $post_id ) )
        return $post_id;

    $meta_value = get_post_meta( $post_id, 'markdown', true );
    $new_meta_value = $_POST['markdown'];

    if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, 'markdown', $new_meta_value, true );

    elseif ( $new_meta_value != $meta_value )
        update_post_meta( $post_id, 'markdown', $new_meta_value );

    elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, 'markdown', $meta_value );
}


function markdown_script() {
    wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/makemarkdown.js');
}

add_action( 'admin_enqueue_scripts', 'markdown_script');

参考文章: wordpress 深度集成
markdown

帝国CMS只需在内容模板引用以下文件即可:

GitHub的下载方法就不说了吧,有不知道的,在大叔的博客上网盘包,自己去拿吧。

---------下面是测试---------

link href="/e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" / script type="text/javascript" src="/e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCore.js"/script script type="text/javascript" SyntaxHighlighter.all(); /script

3.0.83版 还是在使用引用JS和CSS的方法,3.0.9版 开始到最新的 4.0.1版
采用了webpack进行打包,大叔还没整明白这个方法的引用方式,网上也没有好用的教程,暂时就先不折腾了。

这是Header1

这里大叔引用 3.0.83版 做教程指导。

这是Header2

从GitHub上将文件打包下载下来,解压后,有6个文件夹和1个文件。

这是Header3

澳门新葡萄京娱乐场 1image

这是Header4

文件名 文件说明
build 编译文件夹 – 开发使用,我们安装用就不需要它了,删除。
compass 是一个非常丰富的样式框架 – 对SASS的扩展,我们也用不到,删除。
demos 演示文件夹 – 删除
scripts 核心文件夹 – 用于启用和识别对应高亮代码,保留
styles 核心文件夹 – 用于高亮代码的样式展示,保留
tests 测试文件夹 – 删除
.hgignore 忽略文件 – 删除
这是Header5

保留 styles 和 scripts 文件夹,其他都删除。

这是Header6

晓峰残月的链接

引用 笨鸟先飞 勤定补拙

下面是代码

print("Hello World")

将这两个文件夹,分别放到网站对应样式目录下(可以随意放置,但要保证可以正常读取)。

styles文件夹 scripts文件夹
image image

核心文件说明

文件名 文件说明
shCore.js SyntaxHighlighter插件的核心实现文件。根据特殊的 class 配置动态生成常规形式的 html 标签及 class 属性值。包含两个主要对象:XRegExp对象和SyntaxHighlighter对象。
shCore.css SyntaxHighlighter插件的核心样式文件。控制shCore.js生成的 html 文档的布局、字体等。具体着色由Styles文件夹中的css主题控制,或自定义主题。关系:shCore.css + shThemeDefault.css = shCoreDefault.css
shAutoloader.js 提供一种简单的参数方式。实现根据待着色代码块中使用的 brush 来自动根据autoloader对象配置中的隐射加载 brush.js 。

一般代码高亮的地方都是在文章内容中,所以大叔建议只需要在文章内容展示页的
<body></body>
中引入高亮的CSS与JS即可。大叔主要对帝国CMS进行,或使用ThinkPHP制作网站,所以这里只对这两种环境进行演示。

ThinkPHP引入方法

<body>... {load href="/*自定义路径*/css/shCore.css" /} {load href="/*自定义路径*/css/shThemeDefault.css" /} {load href="/*自定义路径*/js/shCore.js" /} {load href="..." /} <script type="text/javascript">SyntaxHighlighter.all();</script>...</body>

帝国CMS引入方法

<body>... <link rel="stylesheet" type="text/css" href="/*自定义路径*/css/shCore.css" /> <link rel="stylesheet" type="text/css" href="/*自定义路径*/css/shThemeDefault.css" /> <script type="text/javascript" src="/*自定义路径*/js/shCore.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script>...</body>

因为TinyMCE不兼容SyntaxHighlighter,所以大叔决定还是启用他的codesample控件,然后通过代码转换,让前台用SyntaxHighlighter样式来输出。

启用codesample

<script> tinymce.init({ ... //启用codesample plugins:[ ... codesample ... ], toolbar1:"... | codesample | ...", ... });</script>

编写置换函数

//写一个置换函数,用来将TinyMCE的codesample的样式调整成SyntaxHighlighter样式用function relcode { $relcont = str_replace('">< code>', '">', $relcont); $relcont = str_replace('< /code>< /pre>', '< /pre>', $relcont); $relcont = str_replace('< pre brush:', $relcont); $relcont = str_replace('markup', 'html', $relcont); echo $relcont;}

前台输出

<?=relcode($show['content'])?>

大叔在这里的使用方法是以 帝国CMS 7.x 为主,用的是 CKEditor
v4.0。王大不知为何,就是不愿意增加功能,所以大叔这里主要是配合来使用。

使用编辑

先在正常模式下将要使用高亮样式的代码编辑好,然后点在外面包入 pre
中,并写上对应的 class 命令:这里放几个常用的

  • PHP : brush:php
  • CSS : brush:css
  • JS : brush:javascript
  • html : brush:html
  • Java : brush:java
  • …对应的代码样式,使用对应的命令

代码不要直接写入后台,先用正常模式写好,因为有一个编辑器中有自动置换功能,使得
html 和 js
代码可以在编辑时也能查看,直接写入后台,会导致文章展示时可看,文章编辑时变成空白行,具体看下面的代码:

**<pre >** //写一个置换函数,用来将TinyMCE的codesample的样式调整成SyntaxHighlighter样式用function relcode {$relcont = str_replace(&#39;&quot;&gt;&lt; code&gt;&#39;, &#39;&quot;&gt;&#39;, $relcont);$relcont = str_replace(&#39;&quot;&gt;&lt; code&gt;&#39;, &#39;&quot;&gt;&#39;, $relcont);$relcont = str_replace(&#39;markup&#39;, &#39;html&#39;, $relcont);echo $relcont;}**</pre>**

因为使用的是 3.0.83版
毕竟是2010年的版本,所以样式上还有一些小瑕疵,大叔建议做一些小调整。

将这里的三个样式做了一些调整,这样可以使代码在前台展示时,不会出现贴边的情况。

.syntaxhighlighter { /*这里调整代码大框架样式*/ width: 730px !important; margin: 1em 0 1em 18px !important; position: relative !important; overflow: auto !important; font-size: 1em !important;} .syntaxhighlighter table td.gutter .line { /*这里调整每一行@序列@的展示样式*/ text-align: right !important; padding: 2px 0.5em 2px 1em !important;} .syntaxhighlighter table td.code .line { /*这里调整每一行@内容@的展示样式*/ padding: 2px 1em !important;}

SyntaxHighlighter自带的共有10个样式,大叔使用了原生的shThemeDefault.css,但原生的样式表没有做行区分,所以大叔自己调整了一下:

.syntaxhighlighter .line.alt1 { background-color: #fff !important;}.syntaxhighlighter .line.alt2 { background-color: #f4f4f4 !important;}

Dy大叔的日常

读书,摄影,旅行,简单而快乐的慢生活。

微信直接搜索

DYdashuderichang

****或扫描二维码(长按图片识别二维码)****

澳门新葡萄京娱乐场 2image

发表评论

电子邮件地址不会被公开。 必填项已用*标注