atjaunināts pants 4 februāris 2020 līdz 5 h 05 mani

 

Kā parādīt un klāt parauga kods tīmekļa vietnē.

Mēs piedāvājam 3 risinājumi.
PrismCodemirrorSyntaxHighlighter

 

Redaktora piezīme: Mums ir priekšroka attiecībā Prims.
   

1) prizma

Marķieris viegla un paplašināms sintaksi, izstrādāta, lai atbilstu mūsdienu interneta standartiem. To izmanto tūkstošiem tīmekļa vietņu, ieskaitot dažus no tiem jūs apmeklējat katru dienu.

Kā instalēt?

Izvēlieties un download priekšmeti vēlamais konfigurācija uz vietas. 2 faili tiek saņemti, lai Javascripts CSS. Glabājas uz servera, jūsu mājas mapē.   Par javascript, norādīts jūsu mājas lapā starp <head> un </head> veids vai atrast kodu.
<script type='text/javascript' src='/js/prism.js'></script>
Kāda izskatās Prism.js   Pievienot CSS kodu šajā klasē ir definēts jūsu config failu 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;
  }
  Line numerācijas Lai parādītu līniju skaitu, papildu fails prism-line-numbers.js būs Pievienojiet JavaScript failu un pievienot faila ceļu konfigurāciju jūsu tīmekļa lapas.
<script type='text/javascript' src='/js/prism.js'></script>
<script type='text/javascript' src='/js/prism-line-numbers.js'></script>
  Prizma-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];
  }
  };

}());

 

Kā apskatīt kodu?

Atzīt valodu, kuru vēlaties, lai parādītu, mainot klases līnijas kodu 1 (Tas maina izgaismojuma krāsas atkarībā no izvēlētā koda): 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>
Rāda entitées Mazs negatīvā puse Prism: No koda n & rsquo displejs; nav dzimtā. Jums ir spiesti izmantot rakstzīmes ASII (HTML vienības) lai parādītu savu kodu pareizi. atrast viena lapa definīcija katras personas. Atkārtojas lietošana sola smagu uzdevumu. praktiski padomi: vienkārši, izmantot savu redaktoru, lai apskatītu rediģēt tekstu ātrāk ar datoru sintaksi. piemērs : ar Dreamweaver Ielīmējiet tekstu daļā izveidē. Šajā daļā koda rediģēt teksta parāda to pašu tekstu ar HTML vienības
 
   

2) Codemirror

Viens cits vismodernākās darbojas dizainu, kas var mainīt lietotājs. Ar kodu displejs tēmas var mainīt, lai labāk lasījumam. Dažas grūtības iesācējiem instalēt. Mēs sīki paskaidrots, kā to izdarīt. 3 soļi nepieciešams displejs 1) Ievadiet ceļu uz CSS tēmām. 2) Izveidot nolaižamās pogas. 3) Ielīmēt JavaScript, lai parādītu. 4) Ielīmējiet koda vēlaties parādīt. SVARĪGA PIEZĪME : Par katru jaunu kodu displeju, jums būs nepieciešams mainīt ID katra rāmja skriptu nejaukt laiku iekraušanas lapas un lasīšanas skriptus. Skatīt paskaidrojumu zemāk. Redaktora piezīme: lai pārvarētu automātisko pārkraušanas mēs pievienojam notikuma OnChange mainīt visus resursus uzreiz. >>OnChange =”javascript:location.reload()”<<

 

SELECT COLOR DISPLAY Select a theme:

 

CSS
et JS

 

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

 

Combo POGA

 

, Ielīmējiet skriptu attēlot teksta

 

negatīvais 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 novērtējums
3.5 / 5 zvaigznes (2 skats)
lielisks50%
Ļoti labi0%
vidējais0%
Nabadzīgs50%
briesmīgs0%

atcelt

 

Novērtēt šo rakstu

2.0 novērtējums
20 maijs 2020

5.0 novērtējums
15 janvāris 2020

2 domas par “Skats uz datora koda

  1. Es drīkstu pateikt, kāds atvieglojums kādam to atklāt
    tiešām saprot, ko viņi apspriež internetā.
    Jūs noteikti saprotat, kā šo jautājumu atklāt un padarīt to par svarīgu.
    Daudz vairāk cilvēku to vajadzētu izlasīt un saprast jūsu stāsta šo pusi.
    Tas ir pārsteidzoši, ka jūs neesat populārāks, ņemot vērā to, ka jūs visvairāk
    noteikti glabā dāvanu.

  2. Ak mans Dievs! pārsteidzošs rakstu frants. Paldies. Tomēr man ir problēmas ar ur rs . Nezinu, kāpēc to nevar parakstīties. Vai ir kāds, kurš iegūtu identisku rss trūkumu? Ikviens, kurš zina, laipni atbild. Thnkx

Atstāj atbildi

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti *