Question

J'utilisais ceci: http://softwaremaniacs.org/soft/highlight/en/ pour mettre en surbrillance le code, comme on le voit ici: http://www.u4ik.us/code et si vous tapez un code et enfourchez, il met en surbrillance. Vous pouvez changer les couleurs et tous. Je me demandais si je pouvais alors exporter en quelque sorte, il (générer un fichier pour le téléchargement) comme « -string-o-numbers.html aléatoire » ou .rtf qui contiendrait le code des entrées utilisateur, dans les couleurs qu'ils ont choisis, afin qu'ils peuvent l'utiliser hors ligne?

Voici mon 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, '&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>
Était-ce utile?

La solution

Si je comprends bien, votre problème est que vous ne disposez pas du code mis en évidence sur votre serveur (dans votre script php).

Dans la démo, il y a cette textarea à droite qui displayes le code mis en surbrillance.

pourrait facilement inclure cette zone de texte sur votre page cachée un et le combiner avec un bouton de téléchargement et la forme. Si quelqu'un appuie sur le bouton de téléchargement, le code sera soumis à votre script php (sur le serveur) à partir duquel vous pouvez le servir sous forme de fichier téléchargeable.

utiliser le code comme ceci afin d'afficher la boîte de dialogue Enregistrer lorsque vous servez le contenu du textarea:

header('Content-type: text/html');
header('Content-Disposition: attachment; filename="random-string-o-numbers.html"');
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top