WP ACF 添加Markdown字段 并解析

acf在word press中十分好用方便，在前文acf的插件使用也说明了其用法，几乎可以自定义增加任何你想要的字段功能，在做一个在线文档功能的时候，发现acf没有自带的markdown格式的字段，pro版本也没有呢。虽然官方没有自带，不过基于这个插件的欢迎程度也有牛人做的外挂，这不最后在github上找到了解决办法，可以让acf插件直接新建markdown格式的文档，前端配合markdown解析的插件，即可实现在线文档功能。下面是详细过程：

下载安装扩展

在github找到扩展包，wp-acf-markdown，如果没有梯子的可以在本站下载，跟wp的插件安装方式一样，下载的文件解压后放入插件文件夹，然后进入网站后台启用

https://github.com/freshsystems/wp-acf-markdown-field

使用字段

启用后新建字段的时候就会在内容板块多一个Markdown选项了，选择这一个类型后面编辑器也是相应的可以支持Markdown格式的

编辑器样式

前端解析成DOM，并格式化高亮代码

这样就在网站后台实现编辑Markdown格式文档，前端显示markdown格式可以选择成型的框架，以及高亮代码显示都可以使用，本次使用的是marked.min.js和highlight.min.js，样式内容使用了，github-markdown.css和highlight.default.min.css，这些框架样式都可以有分享的，在页面里引入即可，文章后面也会打包后发出，然后就是使用了，HTML结构很简单，sidebar 用作存放后面生成的导航，content作为隐藏的获取后台的发布的文档，container用作存放最后生成的格式化的文档，也是展示的页面效果。

<div id="sidebar"></div>                    

<div class="markdown-content ">
 <!--内容主体-->
    <div id="container" class="markdown-body"></div>
    <textarea id="content" class="hidden"><?php echo $current_doc; ?></textarea>
</div>

下面就需要设置JavaScript，使用markdown的解析插件解析为DOM结构

document.addEventListener('DOMContentLoaded', function () {
        const container = document.getElementById('container');
        const content = document.getElementById('content');
        const sidebar = document.getElementById('sidebar');
        const markdownContent = content.innerHTML
    
        container.innerHTML = marked.parse(markdownContent, {
          highlight: function (code, lang) {
            if (lang && hljs.getLanguage(lang)) {
              try {
                return hljs.highlight(lang, code).value;
              } catch (__) {}
            }
            return ''; // 使用默认方式高亮显示
          }
        });
    
        // // Highlight.js配置
        document.querySelectorAll('pre code').forEach((block) => {
          hljs.highlightBlock(block);
        });
    
        // 解析Markdown内容
        let tokens = marked.lexer(markdownContent);
        console.log(tokens)
        // 构建导航HTML
        let navigationHtml = '<div class="nav-list-box">';
        let currentLevel = 0;
        
        tokens.forEach(function (token) {
            if (token.type === 'heading' && token.depth<=3) { // 只获取 h1 h2 h3
                let level = token.depth;
        
                // 根据标题层级调整导航层级
                while (level < currentLevel) {
                    navigationHtml += '</ul></li>';
                    currentLevel--;
                }
        
                while (level > currentLevel) {
                    
                    navigationHtml += '<ul class="nav-list nav-level-'+ currentLevel +'">';
                    currentLevel++;
                    
                    
                }
                // 添加导航项
                let text = token.text.trim();
                let anchor = text.replace(/\s+/g, '-').toLowerCase();
                navigationHtml += '<li class="level-'+currentLevel+'"><a href="#' + anchor + '" class="">' + text + '</a> <i></i>';
            }
        });
        
        // 关闭未关闭的导航层
        while (currentLevel > 0) {
            navigationHtml += '</li></ul>';
            currentLevel--;
        }
        navigationHtml += '</div>';
        
        // 将导航HTML添加到页面
        sidebar.innerHTML = navigationHtml;
        
        
        // 滚动到锚点位置
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
          anchor.addEventListener('click', function (e) {
            e.preventDefault();
    
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
    
            if (targetElement) {
              window.scrollTo({
                top: targetElement.offsetTop,
                behavior: 'smooth'
              });
            }
          });
        });
      });

以上便是通过acf的扩展字段，支持markdown格式的教程，实现在线文档展示。