WordPress站点如何使用Prism实现代码高亮并可一键复制代码

admin阅读(759)评论(0)

WordPress站点如何使用Prism实现代码高亮并可一键复制代码?
经常有站长反馈说boke112百科的代码无法复制,还要人工逐个打字,今天才知道原来使用Prism实现代码高亮并且还可以一键复制代码,下面boke112百科就跟大家说一说WordPress如何Prism实现代码高亮并可一键复制代码,具体操作如下:

1、前往Prism官网下载页面,根据实际需求勾选主题样式、支持的语言和功能插件。

1.1 选择Themes(主题样式),可点击右侧的按钮切换不用样式,在该页面最下方可看到实际高亮效果。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第1张 – 懿古今(http://www.duch.top/)

1.2 勾选支持的语言,建议勾选上PHP、SQL之类的语言。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第2张 – 懿古今(http://www.duch.top/)

1.3 勾选功能插件,如想显示行号就勾选Line Numbers,想显示代码是什么语言就勾选Show Languages,想要实现一键复制代码则勾选Copy to Clipboard Button。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第3张 – 懿古今(http://www.duch.top/)

2、选择好相应的主题样式、支持的语言和功能插件后可以在下方看到对应的文件大小。然后点击【DOWNLOAD JS】按钮下载prism.js文件,点击【DOWNLOAD CSS】按钮下载prism.css文件。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第4张 – 懿古今(http://www.duch.top/)

3、将prism.js和prism.css文件上传到当前主题文件内的js文件夹,然后在主题文件header.php中添加以下的代码:


PHP
具体如下图所示:

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第5张 – 懿古今(http://www.duch.top/)

特别说明:其实可以将prism.css文件的代码添加到我们主题的style.css文件中,将prism.js添加到主题文件footer.php的之前。

4、为经典编辑器添加相应的语言高亮按钮,将以下代码添加到当前主题的functions.php文件最后一个?>的前面:

// 添加代码高亮按钮
add_action(‘after_wp_tiny_mce’, ‘yigujin_tiny_mce’);
function yigujin_tiny_mce($mce_settings) {
?>

PHP
具体如下图所示:

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第6张 – 懿古今(http://www.duch.top/)

5、编辑文章中的代码高亮时,切换到文本模式,如添加PHP代码,则点击一下【PHP】按钮,然后添加PHP代码,在点击一下【/PHP】按钮,最后发表文章即可实现代码高亮。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码? – 第7张 – 懿古今(http://www.duch.top/)

同理,添加其他HTML、CSS、JavaScript、SQL等语言的操作是一样的。

另外,据说使用古腾堡编辑器的话添加高亮代码更加简单,具体如何操作就有待各位站长自行挖掘了,因为boke112百科一直习惯使用经典编辑器。

Emlog评论区代码实现私密评论

admin阅读(3768)评论(0)

你评论的私密内容 只能是评论者和管理员看见 游客和用户是看不见的私密评论内容 会显示 ##私密评论仅博主可见

module.php增加以下代码

<?php
//私密评论
function comcontent($pl) {
    $patterns = array ("/@/","/\[blockquote\](/content/uploadfile/202304/4b1c1681296220.jpg)\[\/blockquote\]/","/\[F(([1-4]?[0-9])|50)\]/"); 
    $replace = array ('回复了','<blockquote>$1</blockquote>','<img alt="表情" src="'.TEMPLATE_URL.'img/face/$1.png" />'); 
    $pl=preg_replace($patterns, $replace, $pl);
    return $pl;
}
// 判断是否为私密评论
function isPrivateComment($comments){
    return(strstr($comments,"[私密评论]"));
}
// 显示私密评论
function showPrivateComment($comments,$post_email,$current_email){
    // 如果是私密评论 是管理员身份或者发布私密者本身才会显示
    if(isPrivateComment($comments)){
        if($post_email===$current_email or ROLE == ROLE_ADMIN){
            return $comments;
        }else{
            return "<font color='red'>##私密评论仅博主可见##</font>";
        }
    }else{
        return $comments;
    }
}
?
这段JS放在模板公用JS

 

 

function addNumber(a) {
    document.getElementById("comment").value += a
}
module.php评论列表和子评论列表中的echo $comment['content'];输出评论内容代码替换如下

 

 

echo showPrivateComment(comcontent($comment['content']),$comment['mail'],$_COOKIE["postermail"]);
再加一个触发私密评论按钮 放到你需要显示的地方

 

 

<a  href="javascript:addNumber('[私密评论]')"><i class="fa fa-lock"></i></a>
PS:如果开启侧边栏最新评论的的一定要记得修改侧边栏评论内容输出替换如下

 

 

<?php echo isPrivateComment(comcontent($value['content']))?'<
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活

夕阳无别事,等风也等你 最美好的相遇...... 世界上许多种相遇,最美好的 莫过于在我们最美好的时光里与你相遇