如果想在博客中展示代码的运行效果,可以借助一些第三方的代码运行框。像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技术站