ধারা আপডেট 4 ফেব্রুয়ারি 2020 থেকে 5 জ 05 আমাকে

 

কিভাবে প্রদর্শন করতে এবং বর্তমান একটি ওয়েবসাইটে নমুনা কোড.

আমরা উপস্থিত 3 সমাধান.
PrismCodemirrorSyntaxHighlighter

 

সম্পাদক এর নোট: আমরা Prims জন্য একটি পক্ষপাত আছে.
   

1) প্রি্ম্

হাইলাইটার লাইটওয়েট এবং প্রসার্য সিনট্যাক্স, আধুনিক ওয়েবের মান পূরণ করার জন্য ডিজাইন করা. এটা তোলে ওয়েবসাইটের হাজার হাজার ব্যবহার করা হয়, যারা কিছু সহ আপনাকে প্রতিদিন যান.

ইনস্টল করার জন্য কিভাবে?

নির্বাচন করুন এবং ডাউনলোড আইটেম সাইটে কাঙ্খিত কনফিগারেশন. 2 ফাইল গৃহীত হয়, CSS এ JavaScripts করতে. আপনার ওয়েবসাইট ফোল্ডারে সার্ভারে সংরক্ষণ করা.   জাভাস্ক্রিপ্ট, মধ্যে আপনার ওয়েব পৃষ্ঠায় নির্দেশিত <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 জাভাস্ক্রিপ্ট ফাইল যোগ করে আপনার ওয়েব পৃষ্ঠার কনফিগারেশনে ফাইল পাথ যোগ হবে.
<script type='text/javascript' src='/js/prism.js'></script>
<script type='text/javascript' src='/js/prism-line-numbers.js'></script>
  প্রিজম-লাইন 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 ব্যবহার করতে বাধ্য (এইচটিএমএল সত্ত্বা) আপনার কোড সঠিকভাবে প্রদর্শন করতে. আবিষ্কার একটি পৃষ্ঠা প্রতিটি সত্তার সংজ্ঞা. একটি পুনরাবৃত্তিমূলক ব্যবহার ভারী কাজের প্রতিশ্রুতি. বাস্তবিক উপদেশ: কেবল করার, কম্পিউটার সিনট্যাক্স সঙ্গে দ্রুত পাঠ্য সম্পাদনা করুন দেখতে আপনার সম্পাদক ব্যবহার. উদাহরণ : সঙ্গে Dreamweaver অংশ সৃষ্টির আপনার লেখা পেস্ট. পার্ট কোড সম্পাদনা আপনার পাঠ্য সহ একই টেক্সট প্রদর্শন করা হয় এইচটিএমএল সত্ত্বা
 
   

2) Codemirror

অন্য একটি সবচেয়ে উন্নত নকশা অপারেটিং ব্যবহারকারী দ্বারা পরিবর্তন করা যাবে. কোড প্রদর্শন থিম ভাল পড়ার জন্য পরিবর্তন করা যাবে. একটি ব্রতী জন্য কিছু সমস্যার ইনস্টল করতে. আমরা বিস্তারিতভাবে ব্যাখ্যা কিভাবে করতে হবে. 3 প্রদর্শনের জন্য পদক্ষেপ প্রয়োজন 1) সিএসএস থিম পাথ লিখুন. 2) ড্রপ-ডাউন বোতাম তৈরি. 3) জাভাস্ক্রিপ্ট আটকান প্রদর্শন করে. 4) কোড কপি করে পেস্ট প্রদর্শন করতে চান. গুরুত্বপূর্ণ নোট : প্রতিটি নতুন কোড প্রদর্শন জন্য আপনি পৃষ্ঠার লোড হচ্ছে এবং পড়া স্ক্রিপ্ট সময় নয় গুলান স্ক্রিপ্ট প্রতিটি ফ্রেমের আইডি পরিবর্তন করতে হবে. নিচে ব্যাখ্যা দেখুন. সম্পাদক এর নোট: অর্ডার স্বয়ংক্রিয় পুনরায় লোড হওয়া পরাস্ত আমরা Onchange একটি ইভেন্ট একযোগে সমস্ত সম্পদ পরিবর্তন করতে যোগ. >>Onchange =”জাভাস্ক্রিপ্ট:location.reload()”<<

 

নির্বাচন রং প্রদর্শন 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%
বাতিল
এই নিবন্ধটি রেটিং

No Title

2.0 নির্ধারণ
20 মে 2020
Anonymous

No Title

5.0 নির্ধারণ
15 জানুয়ারী 2020
ফরাসি ইন্টারফেস

প্রবন্ধগুলোর ন্যাভিগেশন

পোস্ট Darknet ডাটা প্রসেসিং

মাইক্রোসফট অফিস 365

পোস্ট ডাটা প্রসেসিং

এইচটিএমএল সত্ত্বা

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.

উত্তর দিন

আপনার ইমেইল ঠিকানা প্রচার করা হবে না. প্রয়োজনীয় ক্ষেত্রগুলি চিহ্নিত করা আছে *