მუხლი მხრიდან 4 თებერვალი 2020 to 5 h 05 me

 

როგორ არიან და დღემდე ნიმუში კოდი ნახვა,.

ჩვენ წარმოგიდგენთ 3 გადაწყვეტილებები.
PrismCodemirrorSyntaxHighlighter

 

რედაქტორის შენიშვნა: ჩვენ გვაქვს უპირატესობა Prims.
   

1) Prism

ჰაილაითერი მსუბუქი და გააფართოვოთ სინტაქსი, შექმნილია, რათა დააკმაყოფილოს თანამედროვე ვებ სტანდარტებს. იგი გამოიყენება ათასობით საიტებზე, მათ შორის იმ თქვენ ეწვევა ყოველდღიურად.

როგორ დააყენოთ?

შერჩევა და ჩამოტვირთვა ნივთები სასურველი კონფიგურაციის საიტზე. 2 ფაილი მიიღო, to JavaScripts to 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-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: ჩვენების კოდი n & rsquo; არ არის შექმნილი. თქვენ იძულებული გამოიყენოთ სიმბოლოების asii (HTML პირები) არიან თქვენი კოდი სწორად. იპოვოს ერთ გვერდზე განსაზღვრება თითოეული ერთეულის. განმეორებითი გამოყენება ჰპირდება მძიმე ამოცანა. პრაქტიკული რჩევები: უბრალოდ, გამოიყენოთ თქვენი რედაქტორი სანახავად რედაქტირება ტექსტის სწრაფად კომპიუტერული სინტაქსი. მაგალითად : ერთად Dreamweaver ჩასვით თქვენი ტექსტი ნაწილი შექმნა. ნაწილი კოდი თქვენი ტექსტური აჩვენებს იგივე ტექსტი HTML პირები
 
   

2) CodeMirror

ერთი სხვა ყველაზე მოწინავე მოქმედი დიზაინი, რომელიც შეიძლება შეიცვალოს მომხმარებლის მიერ. კოდი ჩვენება თემები შეიძლება შეიცვალოს უკეთესი მოსმენით. გარკვეული სირთულეები ახალბედა ინსტალაცია. ჩვენ აგიხსნით დეტალურად თუ როგორ უნდა გავაკეთოთ. 3 ნაბიჯები საჭირო ჩვენება 1) შეიყვანეთ გზას CSS თემები. 2) შექმნა ჩამოსაშლელი ღილაკს. 3) ჩასვით JavaScript არიან. 4) ჩასვით კოდი გსურთ არიან. შენიშვნა : ყოველი ახალი კოდი ჩვენება თქვენ უნდა შეცვალოს ID თითოეული ჩარჩო სკრიპტი არ აღრეული დროს loading გვერდის და კითხულობს სკრიპტები. იხილეთ განმარტება ქვემოთ. რედაქტორის შენიშვნა: იმისათვის, რომ გადავლახოთ ავტომატური გადატვირთვა დავუმატებთ ღონისძიება Onchange შეცვალოს ყველა რესურსი ერთდროულად. >>Onchange =”javascript:location.reload()”<<

 

აირჩიეთ ფერი DISPLAY Select a theme:

 

CSS
et JS

 

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

 

Combo BUTTON

 

ჩასვით Script არიან თქვენი TEXT

 

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
Anonymous

No Title

5.0 ნიშანი
15 იანვარი 2020
FRENCH INTERFACE

ნავიგაცია სტატიები

გამოქვეყნებული darknet მონაცემთა დამუშავება

Microsoft Office 365

გამოქვეყნებული მონაცემთა დამუშავება

HTML პირები

2 thoughts on "ნახეთ კომპიუტერული კოდი

  1. შეიძლება უბრალოდ ამბობენ როგორი შვება აღმოჩენა ვინმე, რომ
    ნამდვილად ესმის, რასაც ისინი განიხილავენ ინტერნეტში.
    თქვენ რა თქმა უნდა იცით, თუ როგორ, რათა საკითხი ნათელი და მნიშვნელოვანი,.
    ბევრი ხალხი უნდა წაიკითხოს ეს და მესმის ამ მხარეს თქვენი ამბავი.
    ეს გასაკვირი არ ხართ უფრო პოპულარული გათვალისწინებით, რომ თქვენ ყველაზე
    რა თქმა უნდა, გააჩნიათ საჩუქარი.

  2. ღმერთო ჩემო! საოცარი მუხლის dude. მადლობა მიუხედავად ამისა მე განიცდის საკითხი ur rss . არ ვიცი, რატომ ვერ ხერხდება გამოწერას იგი. არსებობს ვინმე მიღების იდენტური rss ნაკლი? ყველას, ვინც იცის, kindly პასუხი. Thnkx

დატოვეთ პასუხი

თქვენი ელ-ფოსტა არ გამოქვეყნდება. აუცილებელი ველები მონიშნულია *