cnblogs csdn 代码运行框实现代码

如果想在博客中展示代码的运行效果，可以借助一些第三方的代码运行框。像cnblogs和csdn都提供了这样的功能，可以直接在文章中展示代码的执行结果、输出或图形等，非常实用。下面是使用cnblogs和csdn实现代码运行框的攻略。

一、cnblogs 代码运行框实现

1. 准备

首先，需要在博客园中打开“源代码”模式，即切换到HTML源代码编辑模式，才能够使用cnblogs的代码运行框。

接着，在HTML源代码编辑器中添加以下代码：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.7/ace.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>

以上代码添加在文档的头部标签<head>中，包含了jQuery、UI和Ace编辑器的引用，后面会介绍使用过程中这些文件的作用。

2. 使用

准备工作完毕后，就可以在文章中插入代码运行框了。

2.1 多行代码

在文章编辑器中，使用Markdown语法输入代码块，如：

(function() {
  var app = angular.module('SampleApp', []);
  app.controller('MainController', function($scope) {
    $scope.message = 'Hello World!';
  });
})();

接下来，在代码块的外部，添加以下代码：

<div id="code-area-div" style="position: relative">
  <div id="code-area" class="shadow" style="position: relative"></div>
  <pre id="output-area" class="shadow"></pre>
  <button id="run-button" style="position: absolute; right: 10px; top: 10px;">Run</button>
</div>

其中，id="code-area-div"表示代码运行框的最外层div；id="code-area"是Ace编辑器的占位div；pre id="output-area"是输出信息的div；id="run-button"是运行按钮；样式中的position: relative表示这些元素是相对定位（为了方便定位按钮）。

最后，在文章底部，添加以下JavaScript代码：

$(document).ready(function() {
  var editor = ace.edit("code-area");
  editor.setTheme("ace/theme/chrome");
  editor.session.setMode("ace/mode/javascript");
  editor.setValue(`(function() {
  var app = angular.module('SampleApp', []);
  app.controller('MainController', function($scope) {
    $scope.message = 'Hello World!';
  });
})();`, 1);

  $("#run-button").on("click", function() {
    try {
      var result = eval(editor.getValue());
      $("#output-area").html(result);
    } catch (e) {
      $("#output-area").html(e.stack);
    }
  });
});

以上代码包含两部分：

初始化Ace编辑器。其中，ace.edit("code-area")表示在<div id="code-area"></div>中创建Ace编辑器实例；editor.setTheme("ace/theme/chrome")表示设置Ace编辑器的主题；editor.session.setMode("ace/mode/javascript")表示设置Ace编辑器的语言模式；editor.setValue表示设置Ace编辑器的默认文本。
执行代码和展示输出信息。点击“Run”按钮后，使用editor.getValue()获取Ace编辑器中的代码，并使用eval()执行代码（如果代码有语法错误则会捕获异常），最后将结果写入$("#output-area")中。

完成上述步骤后，就可以在文章中插入一个带有代码运行框的代码块。

2.2 单行代码

如果想在文章中插入一个单行的代码，可以使用如下代码：

<span id="code-area-span" class="shadow"></span>
<pre id="output-area-span" class="shadow"></pre>
<button id="run-button-span">Run</button>
<script>
  $("#run-button-span").on("click", function() {
    try {
      var result = eval($("#code-area-span").text());
      $("#output-area-span").html(result);
    } catch (e) {
      $("#output-area-span").html(e.stack);
    }
  });
</script>

CSS样式可以自行定义，这里只给出关键部分。在文章中，输入单行代码，例如：

<span id="code-area-span" class="shadow">console.log('Hello World!');</span>

最后添加上述JavaScript代码即可。

二、csdn 代码运行框实现

1. 准备

csdn的代码运行框类似，也需要Spark Editor的支持，因此需要引入以下css和js文件：

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Spark/1.0.0/spark.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Spark/1.0.0/spark.min.js"></script>
</head>

2. 使用

csdn的代码运行框和cnblogs的实现方式略有差异。假设需要在文章中插入一个多行代码块，可以使用如下代码：

<pre class="language-javascript">
(function() {
  var app = angular.module('SampleApp', []);
  app.controller('MainController', function($scope) {
    $scope.message = 'Hello World!';
  });
})();
</pre>
<button onclick="runCode(this)">Run</button>
<div class="output"></div>
<script>
  function runCode(button) {
    var code = button.previousElementSibling.textContent;
    try {
      var result = eval(code);
      button.nextElementSibling.innerHTML = JSON.stringify(result);
    } catch (e) {
      button.nextElementSibling.innerHTML = e.stack;
    }
  }
</script>

代码中用到了csdn提供的语法高亮功能，需要在代码块的外部使用<pre>标签和class="language-javascript"标识语言类型。其中，button是运行按钮，div class="output"是输出信息的div。

点击“Run”按钮后，执行JavaScript代码并将执行结果写入输出信息的div中。这里使用了eval()方法，可以自行替换成其他运行代码的方法。

如果需要在文章中插入单行代码，可以参考cnblogs的实现方式，在单行代码的外部添加一个span或者div，进行类似的实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：cnblogs csdn 代码运行框实现代码 - Python技术站

cnblogs csdn 代码运行框实现代码

一、cnblogs 代码运行框实现

1. 准备

2. 使用

2.1 多行代码

2.2 单行代码

二、csdn 代码运行框实现

1. 准备

2. 使用

相关文章