2011-09-06 51 views
1

我使用的是:http://softwaremaniacs.org/soft/highlight/en/突出顯示代碼,如下所示:http://www.u4ik.us/code如果您鍵入一些代碼並點擊,它會突出顯示它。你可以改變顏色和所有。我想知道如果我可以以某種方式將它導出(生成一個文件以供下載)作爲「random-string-o-numbers.html」或.rtf,它將包含用戶輸入的代碼,並以他們選擇的顏色進行輸入他們可以離線使用它?如何獲得風格化HTML以使用PHP打印文件

這裏是我的腳本:

<!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 <[email protected]> 
    (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, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;'); 
      } 

      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 &rarr;" 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> 

回答

0

據我瞭解,你的問題是,你沒有你的服務器上的突出顯示的代碼(在你的PHP腳本)。

在演示中,在右側顯示突出顯示的代碼的這個textarea。

你可以很容易地將這個textarea包含在你的頁面中作爲隱藏的一個,並將其與下載按鈕和窗體結合起來。如果有人按下了下載按鈕,代碼將被提交到您的php腳本(在服務器上),您可以將它作爲可下載文件提供。

使用這樣的代碼,以顯示當你成爲textarea的內容保存對話框:

header('Content-type: text/html'); 
header('Content-Disposition: attachment; filename="random-string-o-numbers.html"'); 
+0

謝謝,我會用這個爛攤子,當我明天醒來。晚了。 –