член актуализиран 4 февруари 2020 за 5 з 05 мен

 

Как да се покаже и настояще примерен код на уебсайт.

Представяме 3 решения.
PrismCodemirrorSyntaxHighlighter

 

Бележка на редактора: Ние предпочитаме Prims.
   

1) призма

Маркирайте основните лек и разтегателен синтаксис, предназначена да отговори на съвременните уеб стандарти. Той се използва в хиляди сайтове, включително и някои от тези, които посещавате ежедневно.

Как да се инсталира?

Изберете и изтегляне на елементи желаната конфигурация на място. 2 файлове са получили, да JavaScripts на CSS. Съхраняват на сървъра на уебсайта си папка.   За JavaScript, посочено в уеб страницата си между <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>
  Prism Онлайн-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; не е роден. Вие сте принудени да използвате символите Асиите (HTML лица) за да се покаже кода си правилно. намирам една страница определение на всяко лице,. A използват многократно обещава тежка задача. практически съвети: За просто, използвате вашия редактор, за да видите текста за редактиране по-бързо с компютър синтаксис. пример : с Dreamweaver Поставете вашия текст в създаването на част. В част код редактиране текста показва един и същ текст с HTML лица
 
   

2) Codemirror

Друг най-модерната работеща в дизайна, които може да се променя от потребителя. Темите на кода на дисплея могат да се променят за по-добро четене. Някои затруднения за начинаещ да се инсталира. Ние обясни подробно как се прави. 3 изисква стъпки за показване 1) Въведете пътя от темите на CSS. 2) Създаване на бутон падащия. 3) Поставяне на JavaScript, за да изведете. 4) Поставете кода искате да покажете. ВАЖНО : За всеки нов дисплей код, ще трябва да се промени идентификацията на всеки кадър в сценария да не се обърка по време на зареждане на страницата за четене и скриптове. Вижте по-долу обяснение. Бележка на редактора: с цел да се преодолее автоматично презареждане ние добавите събитие на Onchange да промени всички ресурси наведнъж. >>Onchange =”JavaScript:location.reload()”<<

 

SELECT ЦВЕТЕН ДИСПЛЕЙ Select a theme:

 

CSS
et JS

 

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

 

Combo БУТОН

 

Вмъкнете скрипта за показване на вашите ТЕКСТ

 

NEGATIVE 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%
анулира
Оценете тази статия

No Title

2.0 оценка
20 Може 2020
анонимен

No Title

5.0 оценка
15 януари 2020
ФРЕНСКА интерфейс

НАВИГАЦИЯ НА ЧЛЕНОВЕТЕ

Публикувано в Darknet обработка на данни

Microsoft Office 365

Публикувано в обработка на данни

HTML лица

2 мисли за "Преглед на компютърен код

  1. Може ли да кажа само това, което е облекчение да откриете някой, който
    наистина разбира какво се обсъжда по интернет.
    Вие със сигурност знаят как да донесе проблем, към светлината и да я направи важна.
    Много повече хора трябва да прочетете това и да разберат това от вашата история.
    Изненадващо е, че не са по-популярни при положение, че сте най-
    със сигурност притежава дарбата.

  2. о Боже мой! невероятна статия пич. Благодарение Въпреки Срещам проблем с Ур RSS . Не знам защо не може да се абонирате за нея. Има ли някой, все идентичен RSS недостатък? Всеки, който знае, моля, отговорете. Thnkx

Оставете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани *