Статья обновлена 4 февраль 2020 в 5 час 05 мне

 

Как отобразить и представить Пример кода на веб-сайте.

Мы представляем 3 решения.
PrismCodemirrorSyntaxHighlighter

 

Примечание редактора: У нас есть предпочтение примы.
   

1) призма

Highlighter легкий и расширяемый синтаксис, предназначены для удовлетворения современных веб-стандартов. Он используется в тысячах веб-сайтов, в том числе и некоторые из тех, кого вы ежедневно посещают.

Как установить?

Выбрать и элементы загрузки требуемая конфигурация на месте. 2 Файлы принимаются, для JavaScripts в CSS. Хранится на сервере в папке сайта.   Для Java-script, указано в вашем веб-страницы между <head> и </head> путь или найти код.
<script type='text/javascript' src='/js/prism.js'></script>
То, что выглядит как Prism.js   Добавьте код CSS для этого класса должны быть определены в вашем файле конфигурации CSS.

/* PrismJS 1.15.0
  https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript+markup-templating+php+javadoclike+phpdoc+php-extras&plugins=line-highlight+line-numbers+toolbar+autoloader+show-language+copy-to-clipboard */
  /**
  * prism.js Dark theme for JavaScript, CSS and HTML
  * Based on the slides of the talk “/Reg(exp){2}lained/”
  * @author Lea Verou
  */

code[class*="language-"],
  pre[class*="language-"] {
  color: white;
  background: none;
  text-shadow: 0 -.1em .2em black;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

 -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

 -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  }

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
  text-shadow: none;
  }
  }

pre[class*="language-"],
  :not(pre) > code[class*="language-"] {
  background: black;
  }

/* Code blocks */
  pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border: .3em solid hsl(30, 20%, 40%);
  border-radius: .5em;
  box-shadow: 1px 1px .5em black inset;
  }

/* Inline code */
  :not(pre) > code[class*="language-"] {
  padding: .15em .2em .05em;
  border-radius: .3em;
  border: .13em solid hsl(30, 20%, 40%);
  box-shadow: 1px 1px .3em -.1em black inset;
  white-space: normal;
  }

.token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
  color: hsl(30, 20%, 50%);
  }

.token.punctuation {
  opacity: .7;
  }

.namespace {
  opacity: .7;
  }

.token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol {
  color: hsl(350, 40%, 70%);
  }

.token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
  color: hsl(75, 70%, 60%);
  }

.token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string,
  .token.variable {
  color: hsl(40, 90%, 60%);
  }

.token.atrule,
  .token.attr-value,
  .token.keyword {
  color: hsl(350, 40%, 70%);
  }

.token.regex,
  .token.important {
  color: #e90;
  }

.token.important,
  .token.bold {
  font-weight: bold;
  }
  .token.italic {
  font-style: italic;
  }

.token.entity {
  cursor: help;
  }

.token.deleted {
  color: red;
  }
  code, pre {
  font-family: Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace;
  hyphens: none;
  }

pre {
  max-height: 30em;
  overflow: auto;
  }

pre > code.highlight {
  outline: .4em solid red;
  outline-offset: .4em;
  }
  pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
  }

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
  }

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
  }

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em; /* Same as .prism’s padding-top */

 background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

 pointer-events: none;

 line-height: inherit;
  white-space: pre;
  }

 .line-highlight:before,
  .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
  }

 .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
  }

.line-numbers .line-highlight:before,
  .line-numbers .line-highlight:after {
  content: none;
  }

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
  }

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
  }

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

 -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

 .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
  }

 .line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
  }
  Нумерация строк Для отображения номера строк, дополнительный файл prism-line-numbers.js добавит JavaScript файл и добавьте путь к файлу в конфигурации вашей веб-странице.
<script type='text/javascript' src='/js/prism.js'></script>
<script type='text/javascript' src='/js/prism-line-numbers.js'></script>
  Призма-Line numbers.js

(function () {

 if (typeof self === 'undefined' || !self.Prism || !self.document) {
  return;
  }

 /**
  * Plugin name which is used as a class name for <pre> which is activating the plugin
  * @type {String}
  */
  var PLUGIN_NAME = 'line-numbers';

 /**
  * Regular expression used for determining line breaks
  * @type {RegExp}
  */
  var NEW_LINE_EXP = /\n(?!$)/g;

 /**
  * Resizes line numbers spans according to height of line of code
  * @param {Element} element <pre> element
  */
  var _resizeElement = function (element) {
  var codeStyles = getStyles(element);
  var whiteSpace = codeStyles['white-space'];

 if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
  var codeElement = element.querySelector('code');
  var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
  var lineNumberSizer = element.querySelector('.line-numbers-sizer');
  var codeLines = codeElement.textContent.split(NEW_LINE_EXP);

 if (!lineNumberSizer) {
  lineNumberSizer = document.createElement('span');
  lineNumberSizer.className = 'line-numbers-sizer';

 codeElement.appendChild(lineNumberSizer);
  }

 lineNumberSizer.style.display = 'block';

 codeLines.forEach(function (line, lineNumber) {
  lineNumberSizer.textContent = line || '\n';
  var lineSize = lineNumberSizer.getBoundingClientRect().height;
  lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
  });

 lineNumberSizer.textContent = '';
  lineNumberSizer.style.display = 'none';
  }
  };

 /**
  * Returns style declarations for the element
  * @param {Element} element
  */
  var getStyles = function (element) {
  if (!element) {
  return null;
  }

 return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
  };

 window.addEventListener('resize', function () {
  Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);
  });

 Prism.hooks.add('complete', function (env) {
  if (!env.code) {
  return;
  }

 // works only for <code> wrapped inside <pre> (not inline)
  var pre = env.element.parentNode;
  var clsReg = /(?:^|\s)line-numbers(?:\s|$)/;
  if (
  !pre || !/pre/i.test(pre.nodeName) ||
  // Abort only if nor the <pre> nor the <code> have the class
  (!clsReg.test(pre.className) && !clsReg.test(env.element.className))
  ) {
  return;
  }

 if (env.element.querySelector('.line-numbers-rows')) {
  // Abort if line numbers already exists
  return;
  }

 if (clsReg.test(env.element.className)) {
  // Remove the class 'line-numbers' from the <code>
  env.element.className = env.element.className.replace(clsReg, ' ');
  }
  if (!clsReg.test(pre.className)) {
  // Add the class 'line-numbers' to the <pre>
  pre.className += ' line-numbers';
  }

 var match = env.code.match(NEW_LINE_EXP);
  var linesNum = match ? match.length + 1 : 1;
  var lineNumbersWrapper;

 var lines = new Array(linesNum + 1);
  lines = lines.join('<span></span>');

 lineNumbersWrapper = document.createElement('span');
  lineNumbersWrapper.setAttribute('aria-hidden', 'true');
  lineNumbersWrapper.className = 'line-numbers-rows';
  lineNumbersWrapper.innerHTML = lines;

 if (pre.hasAttribute('data-start')) {
  pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
  }

 env.element.appendChild(lineNumbersWrapper);

 _resizeElement(pre);

 Prism.hooks.run('line-numbers', env);
  });

 Prism.hooks.add('line-numbers', function (env) {
  env.plugins = env.plugins || {};
  env.plugins.lineNumbers = true;
  });

 /**
  * Global exports
  */
  Prism.plugins.lineNumbers = {
  /**
  * Get node for provided line number
  * @param {Element} element pre element
  * @param {Number} number line number
  * @return {Element|undefined}
  */
  getLine: function (element, number) {
  if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
  return;
  }

 var lineNumberRows = element.querySelector('.line-numbers-rows');
  var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
  var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);

 if (number < lineNumberStart) {
  number = lineNumberStart;
  }
  if (number > lineNumberEnd) {
  number = lineNumberEnd;
  }

 var lineIndex = number - lineNumberStart;

 return lineNumberRows.children[lineIndex];
  }
  };

}());

 

Как просмотреть код?

Объявите язык, который вы хотите отобразить, изменив класс строки кода 1 (это изменение цвета выделения в зависимости от выбранного кода): class=”language-js class=”language-php class=”language-html
<pre class="line-numbers"><code class="language-html">
Le code ici à déposer que vous souhaitez montrez aux internautes...!
</code></pre>
Показаны entitées Небольшая отрицательная сторона Prism: Отображение кода п & Rsquo; не является родным. Вы вынуждены использовать символы ASII (HTML сущности) Для правильного отображения коды. найти одна страница определение каждого субъекта. Повторяющееся использование обещает тяжелую задачу. практические советы: Для того, чтобы просто, использовать редактор для просмотра редактирования текста быстрее компьютер синтаксис. пример : с Dreamweaver Вставить текст в создании части. В кодовой части редактировать текст отображается один и тот же текст HTML сущности
 
   

2) CodeMirror

Еще один самый продвинутый, работающих в конструкции, которые могут быть изменены пользователем. Темы код дисплея могут быть изменены для лучшего чтения. Некоторые трудности для новичка, чтобы установить. Мы подробно объяснить, как это сделать. 3 Шаги, необходимые для отображения 1) Введите путь темы CSS. 2) Создание раскрывающегося списка. 3) Вставить JavaScript для отображения. 4) Вставить код, который вы хотите отобразить. ВАЖНО : Для каждого нового дисплея кода вам необходимо будет изменить идентификатор каждого кадра в сценарии не перепутать время загрузки страницы и чтение сценариев. Смотрите описание ниже. Примечание редактора: для того, чтобы преодолеть автоматическую перезагрузку добавить событие на OnChange, чтобы изменить все ресурсы сразу. >>OnChange =”Javascript:location.reload()”<<

 

ВЫБОР ЦВЕТА ЭКРАНА Select a theme:

 

CSS
et JS

 

Pour commencer, renseigner le chemin des class Css et Javascript en haut de votre page.

 

КНОПКА Combo

 

ПАСТА СЦЕНАРИЙ ПРОЯВИТЬ ВАШ ТЕКСТ

 

ОТРИЦАТЕЛЬНЫЙ POINT Vous êtes obligé pour chaque cadre de modifier l'ID de textarea (Le même texte serait répéter). 2 ligne doivent être spécifié à la place de NOUVEAU NOM, insérer un mot que vous aurez choisi (Les deux doivent être identique)
 

3) SyntaxHighlighter

  Actuellement en rédaction sur d'autre sujet, L'équipe FI continue dès que possible.              


3.5
3.5 рейтинг
3.5 / 5 звезды (2 вид)
Превосходно50%
Очень хорошо0%
Средний0%
Бедных50%
какой ужас0%

отменить

 

Оценить эту статью

2.0 рейтинг
20 май 2020

5.0 рейтинг
15 январь 2020

НАВИГАЦИЯ СТАТЕЙ

Опубликовано в Darknet обработка данных

Майкрософт офис 365

Опубликовано в обработка данных

HTML сущности

2 мысли о «Вид компьютерного кода

  1. Могу ли я просто сказать, что помощь обнаружить кого-то,
    на самом деле понимает, что они обсуждают через Интернет.
    Вы, конечно, понимаете, как довести вопрос до света и сделать его важным.
    Намного больше людей должны прочитать и понять эту сторону вашей истории.
    Это удивительно, вы не более популярны, учитывая, что вы больше всего
    безусловно, обладают даром.

  2. о Боже мой! удивительная статья чувак. Спасибо Тем не менее я испытываю проблемы с ур RSS . Не знаю, почему Невозможно подписаться на него. Есть ли кто-нибудь получает идентичный RSS недостаток? Любой, кто знает, любезно ответить. Thnkx

оставьте ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *