Frage

Ich habe Folgendes verwendet: http://softwaremaniacs.org/soft/highlight/en/ Um Code hervorzuheben, wie hier zu sehen ist: http://www.u4ik.us/code Und wenn Sie einen Code eingeben und GO drücken, unterstreicht es ihn. Sie können die Farben und alles ändern. Ich habe mich gefragt, ob ich sie dann irgendwie exportieren könnte (eine Datei zum Download generieren) als "Random-STRING-O-Numbers.html" oder .RTF, das den Code enthält, den der Benutzer in den von ihnen ausgewählten Farben eingibt, also dass sie es offline verwenden können?

Hier ist mein Drehbuch:

<!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, '&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>
War es hilfreich?

Lösung

Wie ich weiß, ist Ihr Problem, dass Sie nicht den hervorgehobenen Code auf Ihrem Server (in Ihrem PHP -Skript) haben.

In der Demo befindet sich auf der rechten Seite dieses Textbereich, der den hervorgehobenen Code anzeigt.

Sie können diesen Textbereich einfach auf Ihrer Seite als versteckt aufnehmen und mit einer Download -Schaltfläche und einem Formular kombinieren. Wenn jemand die Download -Taste drückt, wird der Code in Ihr PHP -Skript (auf dem Server) übermittelt, von dem Sie ihn als herunterladbare Datei bedienen können.

Verwenden Sie einen solchen Code, um den Dialogfeld Speichern zu speichern, wenn Sie den Inhalt des Textbereichs bedienen:

header('Content-type: text/html');
header('Content-Disposition: attachment; filename="random-string-o-numbers.html"');
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top