当前位置： 文江博客话题详情

如何使用 PHP 获取 Styled HTML 来打印文件

发布于 2024-12-03 11:34:39 字数 8784 浏览 0 评论 0原文

我正在使用这个：http://softwaremaniacs.org/soft/highlight/en/突出显示代码，如下所示： http://www.u4ik.us/code 如果您输入一些代码并点击执行，它会突出显示它。您可以更改颜色等。我想知道是否可以以某种方式将其导出（生成供下载的文件）作为“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 <[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>
原文

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 <[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, '&').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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

北风几吹夏 2024-12-10 11:34:39

据我了解，您的问题是您的服务器上（在您的 php 脚本中）没有突出显示的代码。

在演示中，右侧有一个文本区域，显示突出显示的代码。

您可以轻松地将此文本区域作为隐藏区域包含在页面上，并将其与下载按钮和表单结合起来。如果有人按下下载按钮，代码将被提交到您的 php 脚本（在服务器上），您可以从那里将其作为可下载文件提供。

使用这样的代码以便在提供文本区域的内容时显示保存对话框：

header('Content-type: text/html');
header('Content-Disposition: attachment; filename="random-string-o-numbers.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:

header('Content-type: text/html');
header('Content-Disposition: attachment; filename="random-string-o-numbers.html"');
回复 原文
~没有更多了~

关于作者

青柠芒果

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文