Come arrivare Styled HTML per stampare un file con PHP
https://stackoverflow.com/questions/7314998
-
26-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
stavo usando questo: http://softwaremaniacs.org/soft/highlight/en/ per evidenziare il codice, come si vede qui: http://www.u4ik.us/code e se si digita un codice e ha colpito andare, si evidenzia. È possibile modificare i colori e tutti. Mi chiedevo se potevo poi in qualche modo esportarlo (generare un file per il download) come un "random-string-o-numbers.html" o .rtf che conterrebbe il codice gli input dell'utente, nei colori che hanno selezionato, in modo da che possono usare offline?
Ecco il mio 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>
Soluzione
A quanto ho capito, il problema è che non si ha il codice evidenziato sul server (nello script php).
Nella demo, c'è questa textarea sulla destra che displayes il codice evidenziato.
Si potrebbe facilmente includere questo textarea sulla tua pagina come nascosto uno e combinarlo con un pulsante per il download e la forma. Se qualcuno preme il pulsante di download, il codice sarà sottoposta allo script php (sul server) da dove si può servire come file scaricabile.
utilizzare il codice come questo, al fine di visualizzare la finestra di dialogo Salva quando si servono i contenuti del textarea:
header('Content-type: text/html');
header('Content-Disposition: attachment; filename="random-string-o-numbers.html"');
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
