I was using this: http://softwaremaniacs.org/soft/highlight/en/ to highlight code, as seen here: http://www.u4ik.us/code and if you type in some code and hit go, it highlights it. You can change the colors and all. I was wondering if I could then somehow export it (generate a file for download) as a “random-string-o-numbers.html” or .rtf which would contain the code the user inputs, in the colors that they selected, so that they can use it offline?
Here’s my script:
<!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>
As I understand, your problem is that you don’t have the highlighted code on your server (in your php script).
In the demo, there is this textarea on the right which displayes the highlighted code.
YOu could easily include this textarea on your page as hidden one and combine it with a download button and form. If someone presses the download button, the code will be submitted to your php script (on the server) from where you can serve it as downloadable file.
use code like this in order to display the save dialog when you serve the contents of the textarea: