άρθρο ενημέρωση 4 Φεβρουάριος 2020 να 5 h 05 μου

 

Πώς να εμφανίσετε και να παρουσιάσουν δείγμα κώδικα σε μια ιστοσελίδα.

παρουσιάζουμε 3 λύσεις.
PrismCodemirrorSyntaxHighlighter

 

Σημείωση του συντάκτη: Έχουμε μια προτίμηση για PRIMS.
   

1) Πρίσμα

Highlighter ελαφρύ και επεκτάσιμο σύνταξη, σχεδιαστεί για να καλύψει τις σύγχρονες προδιαγραφές web. Χρησιμοποιείται σε χιλιάδες ιστοσελίδες, συμπεριλαμβανομένων ορισμένων από αυτούς που επισκέπτονται καθημερινά.

Πώς να εγκαταστήσετε?

Επιλέξτε και στοιχεία λήψης επιθυμητή διαμόρφωση επί τόπου. 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-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) Δημιουργία drop-down κουμπί. 3) Επικόλληση την Javascript για να εμφανίσετε. 4) Επικολλήστε τον κώδικα που θέλετε να εμφανίσετε. ΣΗΜΑΝΤΙΚΗ ΣΗΜΕΙΩΣΗ : Για κάθε νέα οθόνη κώδικας θα πρέπει να αλλάξει την ταυτότητα της κάθε καρέ στο σενάριο να μην συγχέουμε τον χρόνο φόρτωσης της σελίδας και ανάγνωση σενάρια. Δείτε επεξήγηση παρακάτω. Σημείωση του συντάκτη: προκειμένου να ξεπεραστεί η αυτόματη επαναφόρτωση προσθέτουμε μια εκδήλωση για OnChange να αλλάξει όλους τους πόρους ταυτόχρονα. >>onchange =”javascript:location.reload()”<<

 

ΕΠΙΛΟΓΗ έγχρωμη οθόνη Select a theme:

 

CSS
et JS

 

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

 

ΚΟΥΜΠΙ Combo

 

Επικολλήστε τη δέσμη ενεργειών για να εμφανιστεί το κείμενό σας

 

αρνητικό σημείο 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 365

Καταχωρήθηκε στο επεξεργασία δεδομένων

οντότητες HTML

2 thoughts on «Προβολή του κώδικα υπολογιστή

  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.

Αφήστε μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. τα απαιτούμενα πεδία είναι επισημασμένα *