Как заставить Styled HTML печатать файл с помощью PHP - PullRequest
Новая
       46

Как заставить Styled HTML печатать файл с помощью PHP

1 голос
/ 06 сентября 2011

Я использовал это: http://softwaremaniacs.org/soft/highlight/en/, чтобы выделить код, как показано здесь: http://www.u4ik.us/code, и если вы наберете какой-то код и нажмете кнопку go, он выделит его.Вы можете изменить цвета и все.Мне было интересно, смогу ли я затем каким-либо образом экспортировать его (сгенерировать файл для загрузки) в виде «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 <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()+"
";} else {// try auto viewDiv.innerHTML = '
' + t1.value.escape() + "
";} 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);}}

1 Ответ

0 голосов
/ 06 сентября 2011

Как я понимаю, ваша проблема в том, что у вас нет выделенного кода на вашем сервере (в вашем php-скрипте).

В демоверсии справа есть текстовое поле, которое отображает выделенныйcode.

Вы можете легко добавить эту текстовую область на свою страницу как скрытую и объединить ее с кнопкой загрузки и формой.Если кто-то нажмет кнопку загрузки, код будет отправлен в ваш php-скрипт (на сервере), откуда вы сможете использовать его в качестве загружаемого файла.

используйте такой код для отображения диалогового окна сохранения, когда выподать содержимое текстовой области: 

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