如何定位prism.js脚本内代码，实现代码与渲染效果切换展示？

原代码失效原因 #

1. DOM选择错误：$(this).next('.code')无法定位目标代码块，按钮的紧邻下一个元素是.result而非.code，需用nextAll('.code:first')匹配当前按钮对应的第一个.code块。
2. 内容获取方式错误：代码实际存在于script[type="text/plain"]标签中，直接取.code的HTML会包含Prism的包装标签，应提取该script标签的文本内容。
3. 渲染方式错误：用text()注入内容会把HTML当作纯文本显示，需用html()才能让浏览器渲染出视觉效果。
4. 切换逻辑错误：next('.code,.result')无法同时选中两个元素，需分别定位.result和.code后再切换显示状态。

基础实现（默认显示代码，点击切换到渲染效果） #

<button class="flip">查看渲染效果</button>
<div class="result hide"></div>
<div class="code">
<pre class="language-markup"><code class="language-markup"><script class="script" type="text/plain">
<img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</script></code></pre>
</div>

<!-- 依赖引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">

<style>
.hide { display: none; }
</style>

$('.flip').each(function() {
  $(this).on('click', function() {
    // 定位对应元素
    const $codeBlock = $(this).nextAll('.code:first');
    const $resultDiv = $(this).next('.result');
    // 提取有效代码内容
    const codeContent = $codeBlock.find('script[type="text/plain"]').text().trim();
    
    // 切换逻辑
    if ($resultDiv.hasClass('hide')) {
      $resultDiv.html(codeContent);
      $(this).text('查看代码');
    } else {
      $(this).text('查看渲染效果');
    }
    $resultDiv.toggleClass('hide');
    $codeBlock.toggleClass('hide');
  });
});

反向实现（默认显示渲染效果，点击切换到代码） #

如果需要默认展示渲染后的视觉效果，点击按钮切换到代码视图，可使用以下代码：

<button class="flip">查看代码</button>
<div class="result"></div>
<div class="code hide">
<pre class="language-markup"><code class="language-markup"><script class="script" type="text/plain">
<p>XYZ..something <input type="text"/></p>
</script></code></pre>
</div>

<!-- 依赖引入同上 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet">

<style>
.hide { display: none; }
</style>

// 页面加载时预先渲染所有效果
$('.flip').each(function() {
  const $codeBlock = $(this).nextAll('.code:first');
  const $resultDiv = $(this).next('.result');
  const codeContent = $codeBlock.find('script[type="text/plain"]').text().trim();
  $resultDiv.html(codeContent);
});

// 点击切换逻辑
$('.flip').click(function() {
  const $codeBlock = $(this).nextAll('.code:first');
  const $resultDiv = $(this).next('.result');
  
  if ($(this).text().trim() === '查看代码') {
    $(this).text('查看渲染效果');
    $resultDiv.addClass('hide');
    $codeBlock.removeClass('hide');
  } else {
    $(this).text('查看代码');
    $resultDiv.removeClass('hide');
    $codeBlock.addClass('hide');
  }
});

关键注意事项 #

• 确保按钮、.result、.code的结构一一对应，避免DOM选择混乱。
• 使用trim()去除代码内容中的多余换行和空格，避免渲染出现不必要的空白。
• 引入Prism.js时需确保主题样式正确加载，保证代码块的高亮显示效果。

内容的提问来源于stack exchange，提问作者blogob