Argon主题代码高亮缩进

有网友反映Argon主题自带代码块无法缩进,这里提供两种解决方案。

方案一:使用WP插件

使用pure-highlightjs插件

优点:无须配置即用,缺点:若不手动修改html则可能底部多出一空行。

点击WordPress经典编辑器的代码块按钮,即可插入代码

方案二:手动配置插件

1、下载插件

下载mce_code_plugin压缩包,解压到/wp-content/plugins目录。

注意:这不是标准的WordPress插件(你需要自己配置)

将文件mce_code_plugin.htm和mce_code_plugin.js里的https://www.szfx.top/改为你的网址

2、添加相关函数

在functions.php文件内添加函数

// code highlight
function spces_code_plugin() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
      return;
   }
   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'specs_mce_external_plugins_filter' );
      add_filter( 'mce_buttons', 'specs_mce_buttons_filter' );
   }
}
add_action('admin_head', 'spces_code_plugin');
function specs_mce_external_plugins_filter($plugin_array) {
    $plugin_array['specs_code_plugin'] = 'https://www.szfx.top/wp-content/plugins/mce_code_plugin/mce_code_plugin.js';
    return $plugin_array;
}
function specs_mce_buttons_filter($buttons) {
    array_push($buttons, 'specs_code_plugin mce-i-wp_code');
    return $buttons;
}

注意修改https://www.szfx.top/为你的网址

一定不要偷懒,不改这些网址,则在你的编辑器内是无法使用的。

3、使用方法

WordPress经典编辑器的出现代码块按钮,点击即可插入代码

文件下载

上述文件下载:https://pan.quark.cn/s/6ae2aeab1f28

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:Argon主题代码高亮缩进 作者:松鼠小

评论

  1. Windows Chrome 91.0.4472.124
    广东省东莞市 移动
    3 年前
    2021-7-08 14:41:23

    大佬顶部栏用的是什么?插件还是代码实现的?

    • Avatar photo
      博主
      小草
      Windows Chrome 91.0.4472.114
      江西省南昌市 联通
      3 年前
      2021-7-08 21:27:24

      后台-【外观】-【菜单】,添加

  2. PineDX
    Windows Chrome 97.0.4692.99
    美国 新泽西州月桂山镇Comcast通信公司
    2 年前
    2022-1-26 13:53:13

    请问你这篇文章的代码高亮就是这个插件做的吗?

    • Avatar photo
      博主
      PineDX
      Windows Edge 97.0.1072.69
      浙江省杭州市 移动
      2 年前
      2022-1-30 21:56:23

      这个是本主题自带的,你可以尝试一下免费插件Prismatic,界面类似,商店搜即可

      • 丶Karl
        szfx
        Windows Edge 109.0.1518.55
        湖南省湘潭市 移动
        1 年前
        2023-1-19 19:02:20

        请问这个前面的缩进是空格还是tab呢

        • Avatar photo
          博主
          丶Karl
          Windows Edge 109.0.1518.55
          浙江省温州市 移动
          1 年前
          2023-1-19 22:30:22

          空格和tab应该都行

          • 丶Karl
            szfx
            Windows Edge 109.0.1518.55
            湖南省湘潭市 移动
            1 年前
            2023-1-19 22:33:03

            好的,谢谢୧(๑•̀⌄•́๑)૭

  3. 吴基岩
    Windows Edge 108.0.1462.54
    上海市 电信
    1 年前
    2022-12-23 21:18:37

    博主您好,请问wordpress上的argon主题内置如何进行代码高亮?
    我使用了<.pre><.code>标签,却没有预览。

    • Avatar photo
      博主
      吴基岩
      Windows Edge 108.0.1462.54
      浙江省杭州市 移动
      1 年前
      2022-12-26 20:14:05

      大哥是【pre】【code】标签吧

      • 吴基岩
        szfx
        Windows Edge 108.0.1462.54
        上海市 电信
        1 年前
        2022-12-30 14:27:32

        我直接打<>会被识别掉,而且我已经找到方法了.

  4. JIeJaitt
    Macintosh Chrome 109.0.0.0
    湖南省衡阳市 电信
    1 年前
    2023-2-11 0:42:39

    怎么指定代码高亮的语言呢?比如指定为c++高亮或者java高亮

    • Avatar photo
      博主
      JIeJaitt
      Windows Edge 109.0.1518.78
      浙江省杭州市 电信
      1 年前
      2023-2-11 0:46:01

      不明白你的意思,插件是可以手动设定高亮的语言标签,但无法自动识别你插入的代码

      • JIeJaitt
        szfx
        Macintosh Chrome 109.0.0.0
        湖南省衡阳市 电信
        1 年前
        2023-2-11 0:49:53

        我想问下就是如果不使用插件的话,argon如何指定代码高亮的语言标签呢?

        • Avatar photo
          博主
          JIeJaitt
          Windows Edge 109.0.1518.78
          浙江省杭州市 电信
          1 年前
          2023-2-11 0:54:26

          经典编辑器:切换到文本《pre class=”line-numbers”》《code class=”language-xxx”》《/code》《/pre》;
          古腾堡编辑器:ctrl + shift + alt + m,进行类似的操作。

          • JIeJaitt
            szfx
            Macintosh Chrome 109.0.0.0
            湖南省衡阳市 电信
            1 年前
            2023-2-11 0:56:25

            谢谢

          • JIeJaitt
            szfx
            Macintosh Chrome 109.0.0.0
            湖南省衡阳市 电信
            1 年前
            2023-2-11 1:02:04

            请问下大佬,我把主题自带的代码块做html编辑发现
            <pre class=”wp-block-code”>

            也可以实现代码块的效果,但是居然跟我指定的语言的代码高亮是一样的,请问wp-block-code代表的是啥意思呢?

          • Avatar photo
            博主
            JIeJaitt
            Windows Edge 109.0.1518.78
            浙江省杭州市 电信
            1 年前
            2023-2-11 1:06:37

            看个人习惯吧,这个类名可能是便于主题函数自动识别代码,然后添加高亮吧,但我还是习惯用插件添加,毕竟换主题后还可以通过插件实现代码高亮。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: Github @zhheo/Sticker-Heo
Source: github.com/k4yt3x/flowerhd
颜文字
AmashiroNatsukiEars
Heo
小恐龙
花!
上一篇
下一篇