آرٹیکل کو اپ ڈیٹ کیا گیا 4 فروری 2020 کرنے 5 h 05 منٹ

 

ظاہر کرنے کے لئے اور کس طرح موجود ایک ویب سائٹ پر نمونے کا کوڈ.

ہم پیش 3 حل.
PrismCodemirrorSyntaxHighlighter

 

ایڈیٹر کا نوٹ: ہم Prims کے لئے ایک ترجیح ہے.
   

1) PRISM کے

ہلکا پھلکا اور قابل توسیع نحو نمایاں, جدید ویب کے معیار کو پورا کرنے کے لئے ڈیزائن. یہ ویب سائٹس کے ہزاروں میں استعمال کیا جاتا ہے, ان میں سے کچھ شامل ہے آپ کو روزانہ کا دورہ.

نصب کرنے کے لئے کس طرح?

کو منتخب کریں اور لوڈ اشیاء سائٹ پر مطلوبہ ترتیب. 2 فائلوں موصول ہوئی ہیں, سی ایس ایس کرنے کے javascripts کے کرنے. آپ کی ویب سائٹ کے فولڈر میں سرور پر محفوظ.   جاوا سکرپٹ کے لئے, کے درمیان آپ کے ویب کے صفحے میں اس بات کا اشارہ <head> اور </head> راستہ یا کوڈ جائے.
<script type='text/javascript' src='/js/prism.js'></script>
کیا کی طرح لگتا ہے Prism.js   اس طبقے کے لئے سی ایس ایس کوڈ کو آپ تشکیل فائل سی ایس ایس میں وضاحت ضروری شامل کریں.

/* 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 جاوا اسکرپٹ فائل کو شامل کریں اور آپ کے ویب صفحے کی ترتیب میں فائل کا پاتھ اضافہ کریں گے.
<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: کوڈ ن اور لوگو کے ڈسپلے؛ اسے نہیں ہے. تم سے asii حروف کا استعمال کرنے کے لئے مجبور کیا جاتا ہے (HTML اداروں) درست طریقے سے آپ کے کوڈ کو ظاہر کرنے کے لئے. مل ایک صفحہ ہر ایک ہستی کی تعریف. ایک بار بار استعمال ایک بھاری کام کا وعدہ. عملی مشورہ: کرنے کے لئے صرف, کمپیوٹر نحو کے ساتھ تیزی سے ترمیم متن دیکھنے کے لئے آپ کے ایڈیٹر کا استعمال. مثال : ساتھ Dreamweaver حصہ تخلیق میں اپنے متن چسپاں کریں. پارٹ کوڈ میں ترمیم کریں میں اپنے متن کے ساتھ ایک ہی متن دکھاتا ہے HTML اداروں
 
   

2) Codemirror

ایک دوسرے کو سب سے زیادہ اعلی درجے کی ڈیزائن میں کام صارف کی طرف سے تبدیل کیا جا سکتا ہے کہ. کوڈ ڈسپلے موضوعات بہتر پڑھنے کے لئے تبدیل کیا جا سکتا. نصب کرنے کے لئے ایک نوسکھئیے کے لئے کچھ مشکلات. ہم کس طرح کرنا ہے تفصیل سے وضاحت. 3 اقدامات ڈسپلے کے لئے ضروری 1) سی ایس ایس کے موضوعات کا راستہ درج کریں. 2) ڈراپ ڈاؤن بٹن بنائیں. 3) ظاہر کرنے کے لئے جاوا سکرپٹ چسپاں کریں. 4) آپ کو ظاہر کرنے کے لئے چاہتے کوڈ چسپاں کریں. اہم نوٹ : ہر نئی کوڈ ڈسپلے کے لئے آپ کو نہیں صفحے کے لوڈ ھونے اور پڑھنے سکرپٹ کے وقت کو الجھانے کے لئے رسم الخط میں ہر فریم کی شناخت تبدیل کرنے کی ضرورت ہوگی. ذیل میں وضاحت ملاحظہ کریں. ایڈیٹر کا نوٹ: خود کار طریقے سے دوبارہ لوڈ قابو پانے کے لئے ہم Onchange پر ایک واقعہ ایک بار میں تمام وسائل کو تبدیل کرنے کے لئے شامل کریں. >>Onchange =”جاوا سکرپٹ:location.reload()”<<

 

SELECT رنگ ڈسپلے Select a theme:

 

CSS
et JS

 

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

 

کومبو بٹن

 

سکرپٹ آپ کے متن کو ظاہر کرنے پیسٹ

 

منفی نقطہ 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. May I simply say what a relief to discover someone that
    really understands what they are discussing over the internet.
    You certainly understand how to bring an issue to light and make it important.
    A lot more people ought to read this and understand this side of your story.
    It’s surprising you are not more popular given that you most
    certainly possess the gift.

جواب چھوڑیں

آپ کا ای میل ایڈریس شائع نہیں کیا جائے گا. ضرورت ہے شعبوں نشان لگا دیا گیا رہے ہیں *