我正在使用这个: http: //softwaremaniacs.org/soft/highlight/en/来突出显示代码,如下所示:http ://www.u4ik.us/code如果你输入一些代码并点击 go,它突出显示它。您可以更改颜色和所有内容。我想知道我是否可以以某种方式将其导出(生成文件以供下载)为“random-string-o-numbers.html”或.rtf,其中将包含用户输入的代码,采用他们选择的颜色,所以他们可以离线使用吗?
这是我的脚本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>U4iK_HaZe Code Highlighter</title>
<head>
<title>highlight.js test</title>
<meta charset="utf-8">
<link rel="stylesheet" title="Default" href="styles/default.css">
<link rel="alternate stylesheet" title="Dark" href="styles/dark.css">
<link rel="alternate stylesheet" title="FAR" href="styles/far.css">
<link rel="alternate stylesheet" title="IDEA" href="styles/idea.css">
<link rel="alternate stylesheet" title="Sunburst" href="styles/sunburst.css">
<link rel="alternate stylesheet" title="Zenburn" href="styles/zenburn.css">
<link rel="alternate stylesheet" title="Visual Studio" href="styles/vs.css">
<link rel="alternate stylesheet" title="Ascetic" href="styles/ascetic.css">
<link rel="alternate stylesheet" title="Magula" href="styles/magula.css">
<link rel="alternate stylesheet" title="GitHub" href="styles/github.css">
<link rel="alternate stylesheet" title="Brown Paper" href="styles/brown_paper.css">
<link rel="alternate stylesheet" title="School Book" href="styles/school_book.css">
<link rel="alternate stylesheet" title="IR Black" href="styles/ir_black.css">
<style>
body {
font: small Arial, sans-serif;
}
h2 {
font: bold 100% Arial, sans-serif;
margin-top: 2em;
margin-bottom: 0.5em;
}
table {
width: 100%; padding: 0; border-collapse: collapse;
}
th {
width: 12em;
padding: 0; margin: 0;
}
td {
padding-bottom: 1em;
}
td, th {
vertical-align: top;
text-align: left;
}
pre {
margin: 0; font-size: medium;
}
#switch {
overflow: auto; width: 57em;
list-style: none;
padding: 0; margin: 0;
}
#switch li {
float: left; width: 10em;
padding: 0.1em; margin: 0.1em 1em 0.1em 0;
background: #EEE;
cursor: pointer;
}
#switch li.current {
background: #CCC;
font-weight: bold;
}
.test {
color: #888;
font-weight: normal;
margin: 2em 0 0 0;
}
.test var {
font-style: normal;
}
.passed {
color: green;
}
.failed {
color: red;
}
.code {
font: medium monospace;
}
.code .keyword {
font-weight: bold;
}
</style>
<script src="highlight.pack.js"></script>
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
</script>
<script>
// Stylesheet switcher © Vladimir Epifanov <voldmar@voldmar.ru>
(function(container_id) {
if (window.addEventListener) {
var attach = function(el, ev, handler) {
el.addEventListener(ev, handler, false);
}
} else if (window.attachEvent) {
var attach = function(el, ev, handler) {
el.attachEvent('on' + ev, handler);
}
} else {
var attach = function(el, ev, handler) {
ev['on' + ev] = handler;
}
}
attach(window, 'load', function() {
var current = null;
var info = {};
var links = document.getElementsByTagName('link');
var ul = document.createElement('ul')
for (var i = 0; (link = links[i]); i++) {
if (link.getAttribute('rel').indexOf('style') != -1
&& link.title) {
var title = link.title;
info[title] = {
'link': link,
'li': document.createElement('li')
}
ul.appendChild(info[title].li)
info[title].li.title = title;
info[title].link.disabled = true;
info[title].li.appendChild(document.createTextNode(title));
attach(info[title].li, 'click', (function (el) {
return function() {
current.li.className = '';
current.link.disabled = true;
current = el;
current.li.className = 'current';
current.link.disabled = false;
}})(info[title]));
}
}
current = info['Default']
current.li.className = 'current';
current.link.disabled = false;
ul.id = 'switch';
container = document.getElementById(container_id);
container.appendChild(ul);
});
})('styleswitcher');
</script>
</head>
<body>
<script type="text/javascript">
String.prototype.escape = function() {
return this.replace(/&/gm, '&').replace(/</gm, '<').replace(/>/gm, '>');
}
function doIt() {
var viewDiv = document.getElementById("highlight-view");
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var selector = document.getElementById("langSelector");
var selectedLang = selector.options[selector.selectedIndex].value.toLowerCase();
if(selectedLang) {
viewDiv.innerHTML = '<pre><code class="'+selectedLang+'">'+t1.value.escape()+"</code></pre>";
} else { // try auto
viewDiv.innerHTML = '<pre><code>' + t1.value.escape() + "</code></pre>";
}
hljs.highlightBlock(viewDiv.firstChild.firstChild);
t2.value = viewDiv.innerHTML;
}
function copyToBuffer(textToCopy) {
if (window.clipboardData) { // IE
window.clipboardData.setData("Text", textToCopy);
} else if (window.netscape) { // FF
// from http://developer.mozilla.org/en/docs/Using_the_Clipboard
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
gClipboardHelper.copyString(textToCopy);
}
}
</script>
<script type="text/javascript">
var langSelectorHtml = '<label>Language <select id="langSelector">';
langSelectorHtml += '<option value="">Auto</option>';
for (var i in hljs.LANGUAGES) {
if (hljs.LANGUAGES.hasOwnProperty(i))
langSelectorHtml += '<option value=\"'+i+'\">'+i.charAt(0).toUpperCase()+i.substr(1)+'</option>';
}
langSelectorHtml += '</select></label>';
document.write(langSelectorHtml);
</script>
<table width="100%">
<tr>
<td><textarea rows="20" cols="50" id="t1"></textarea></td>
<td><textarea rows="20" cols="50" id="t2"></textarea></td>
</tr>
<tr>
<td>Paste Code Here:</td>
</tr>
</table>
<table width="98%">
<tr>
<td width="50%"><input type="button" value="Highlight →" onClick="doIt()"/></td>
<td width="50%" align="right"><input type="button" value="Copy to Clipboard" onClick="copyToBuffer(document.getElementById('t2').value);"/></td>
</tr>
</table>
<div id="styleswitcher">
<h2>Styles</h2>
</div>
<p>Code: </p>
<div id="highlight-view"></div>
</body>
</html>