How to make a code box with style or color-scheme

Navigation
0

Hi StackOverFlow colleagues, some time ago I wanted to make this style of code box but I really do not know how to start, or what library I can use to do this.

Here I leave an image of what I want to put on my website.

I am attentive to any question or answer.

    
asked by ByGroxD 28.05.2018 в 19:29
source

2 answers

1

You could use Code Mirror , for example: 

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  // muestro las líneas de código
  lineNumbers: true,
  // elijo el tema
  theme: 'icecoder',
  // esto deshabilita la opción de reescribir
  readOnly: true
});
<!-- fundamental para que funcione -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.js"></script>

<!-- tema a elección -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/theme/icecoder.min.css" rel="stylesheet" />

<!-- librería aceptada a elección -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/mode/javascript/javascript.min.js"></script>


<h2>Code Mirror</h2>

<textarea id="code" name="code">$(function() {
  $('div#froala-editor').froalaEditor({
    toolbarButtons: ['bold', 'italic', 'underline', 'strike'],
    
    // define new inline styles.
    inlineStyles: {
      'Big Red': 'font-size: 20px; color: red;',
      'Small Blue': 'font-size: 14px; color: blue;'
    }
  });
});</textarea>

Then there is more configuration available in the documentation .

    
answered by 28.05.2018 / 20:21
source
1

Another one you could use is Prism which also has CDN which facilitates its use directly

Its use would be as follows: 

<!--Incluir esto en el Head-->
<!--Tema de Color -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-okaidia.min.css">

<!--Si deseas incluir un botón para facilitar copiar el fragmento de código posteado a tus lectores-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/toolbar/prism-toolbar.min.css">

<!--Incluir al final de tu página web con los demás scripts-->
<!--Biblioteca-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>

<!--Sintaxis de lenguaje a emplear (en este caso incluí css)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.min.js"></script>

<!--Incluir estos Plugins para que funcione lo de arriba-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/data-uri-highlight/prism-data-uri-highlight.min.js"></script>

Finally it is used like this with the html 

<pre><code class="language-css">p { color: red; }</code></pre>
    
answered by 29.05.2018 в 06:09
Get GET value from my javascript URL List linked by reference to a method, c ++