请用html 集合js-yaml写一个yaml校验工具,并用codemirror显示yaml内容
时间: 2024-04-10 15:28:55 浏览: 10
你可以使用以下HTML代码来创建一个YAML校验工具,并使用CodeMirror库来显示YAML内容:
```html
<!DOCTYPE html>
<html>
<head>
<title>YAML校验工具</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.14.1/js-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/yaml/yaml.min.js"></script>
</head>
<body>
<textarea id="yaml-content" rows="10" cols="80"># 在这里输入你的YAML内容</textarea>
<button onclick="validateYaml()">校验</button>
<div id="result"></div>
<script>
function validateYaml() {
var yamlContent = document.getElementById('yaml-content').value;
try {
jsyaml.safeLoad(yamlContent);
document.getElementById('result').innerText = 'YAML内容有效!';
} catch (e) {
document.getElementById('result').innerText = 'YAML内容无效:' + e.message;
}
}
var yamlEditor = CodeMirror.fromTextArea(document.getElementById('yaml-content'), {
mode: 'yaml',
theme: 'default',
lineNumbers: true
});
</script>
</body>
</html>
```
这段代码中,我们使用了CodeMirror库来创建一个具有语法高亮和行号