Experimental code editor based on CodeMirror.
Tool Code es una librería que te permite incrustar ejemplos de código en tu documentación utilizando CodeMirror en archivos HTML y markdown.
Incluye los siguientes links de CDN en tu archivo HTML.
<link href="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.js"></script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Swanix - Tool Code</title>
</head>
<body>
<h1>Code exammple</h1>
<textarea code-editor="html" code-result-size="200">
<h5>Buttons</h5>
<button class="is-basic">Button</button>
<button class="is-primary">Button</button>
<button class="is-secondary">Button</button>
</textarea>
<!-- Tool Code Library -->
<link href="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.js"></script>
<script>
loadCss = ["https://swanix.org/ui/dist/swanix.min.css"];
loadJs = ["https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"];
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Swanix - Tool Code</title>
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/swanix/docsix/dist/docsix.min.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: "Coderix",
themeColor: '#000',
basePath: 'content/',
homepage: '_site-home.md',
loadSidebar: '_site-menu.md',
subMaxLevel: 1,
auto2top: true,
plugins: [
function(hook, vm) {
hook.doneEach(function() {
loadCss = ["https://swanix.org/ui/dist/swanix.min.css"];
loadJs = ["https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"];
setTimeout(initCodeEditor, 300);
});
}
]
};
</script>
<!-- Tool Docs Library -->
<script src="https://cdn.jsdelivr.net/gh/swanix/tool-docs@latest/dist/tool-docs.js"></script>
<!-- Tool Code Library -->
<link href="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/gh/swanix/tool-code@latest/dist/tool-code.js"></script>
</body>
</html>En tus documentos HTML o markdown puedes incluir editores con el elemento <textarea> asignando el atributo code-editor y los atributos opcionales code-result y code-result-sizepara su previsualización.
| Atributo | Por defecto | Opciones | Comentarios |
|---|---|---|---|
| code-editor | null | html, css, js, vue, mixed | Obligatorio para instanciar el editor |
| code-result | null | visible, hidden | Opcional, por defecto siempre es visible |
| code-result-size | 250 | number | Opcional, no acepta unidades (medida en px) |
<textarea code-editor="html" code-result-size="200">
<!-- HTML code goes here -->
</textarea><textarea code-editor="css" code-result-size="200">
<!-- CSS code goes here -->
</textarea><textarea code-editor="js" code-result-size="200">
<!-- JavaScript code goes here -->
</textarea><textarea code-editor="vue" code-result-size="200">
<!-- Vue code goes here -->
</textarea>El editor en modo mixed permite incluir código HTML, CSS y JavaScript.
<textarea code-editor="mixed" code-result-size="200">
<!-- HTML, CSS, JavaScript code goes here -->
</textarea>Este plugin utiliza la librería Codemirror con los modos XML, CSS, JavaScript, Vue y Mixed:
- codemirror.css
- codemirror.js
- mode-xml.js
- mode-css.js
- mode-javascript.js
- mode-htmlmixed.js
- mode-vue.js
Lenguajes y formatos
- HTML
- CSS
- JavaScript
- Vue
- PHP
- Sass
- TypeScript