Ace est intelligent quand il s'agit de rendre le code avec la mise en évidence et ne rend pas tout le code, mais seulement un peu plus que la vue actuelle nécessite. Cependant, pour mon cas d'utilisation, je dois obtenir la source HTML rendue de tout le code. Y at-il un moyen de rendre tout mon code à la fois?Éditeur de code Ace: Rendre tout le code au format HTML?
"un utilisateur" m'a orienté dans la bonne direction. Je piraté ensemble quelque chose qui fonctionne pour moi en utilisant un build as: https://github.com/ajaxorg/ace-builds/
éditeur régulier ACE à gauche, statiquement surligné HTML à droite. Initialement, la source de la page est utilisée comme contenu, mais peut être modifiée dans l'éditeur et le panneau de droite est rendu instantanément.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ACE Static Highlighter</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor, #static {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
}
#static {
left: 50%;
right: 0;
overflow: auto;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<pre id="static"></pre>
<script src="ace/build/src/ace.js"></script>
<script src="ace/build/src/ext-static_highlight.js"></script>
<script>
var highlight = ace.require("ace/ext/static_highlight")
var dom = ace.require("ace/lib/dom")
var codeEl = document.getElementById("static");
var editor = ace.edit("editor");
//editor.session.setMode("ace/mode/html");
//editor.setTheme("ace/theme/twilight");
editor.setOptions({
showPrintMargin: false,
mode: "ace/mode/html",
theme: "ace/theme/twilight"
});
editor.session.setValue(document.documentElement.outerHTML);
doHighlight(editor, codeEl);
editor.session.on("change", function() {
doHighlight(editor, codeEl);
});
function doHighlight(editor, codeEl) {
codeEl.textContent = editor.session.getValue();
highlight(codeEl, {
// broken, see https://stackoverflow.com/a/31882064/2044940
//mode: editor.session.getMode().$id,
mode: editor.session.$modeId,
theme: editor.getTheme(),
startLineNumber: 1,
showPrintMargin: false,
trim: true
}, function (highlighted) {
var themeStyleId = editor.getTheme().replace("/theme/", "-");
var match = document.getElementById(themeStyleId).innerHTML.match(
new RegExp(`.${themeStyleId}\\s+\\{[^}]*?background-color:\\s*?([^;,}]+)`)
);
if (match) {
codeEl.style.backgroundColor = match[1];
}
});
}
</script>
</body>
</html>
S'il y a un moyen moins hackish pour obtenir la couleur d'arrière-plan du thème, s'il vous plaît faites le moi savoir.
vous pouvez utiliser ace/ext/static_highlight similaire à https://github.com/ajaxorg/ace/issues/1480#issuecomment-20201314 et https://github.com/shadowcodex/c9.ide.print/blob/master/c9.ide.print.js
Avez-vous besoin d'être rendu dans l'éditeur et d'être éditable, ou avez-vous juste besoin du code HTML pour quelque chose (par exemple l'impression)? –
Juste le code HTML en tant que chaîne, non éditable, pour l'utiliser en dehors de l'éditeur. En fait, je veux injecter le code dans une autre page vierge, afin que je puisse copier et coller le code incluant la coloration syntaxique dans un document Google Docs. Copier/coller à l'intérieur de l'éditeur ne reprend pas la coloration syntaxique, tandis que la copie du HTML rendu le préserve (je suppose que le contenu du presse-papiers est au format RTF). – CoDEmanX
voulez-vous dire 'document.getElementsByClassName ('ace_content') [0] .innerHTML' ne retourne pas le code entier? –