TinyMCE Complemento Code Sample
Fecha Publicación:
02 de Mayo de 2019
Fecha Modificación:
14 de Febrero de 2021
Complemento Code Sample para TinyMCE:
El complemento Code Sample (CodeSample) permite a un usuario insertar e incrustar fragmentos de código resaltados en color de sintaxis en el área editable.
- Página Oficial del Plugin Code Sample para TinyMCE
- Download the TinyMCE 4 language packs (.zip)
- Plugins TinyMCE
<script src="/webadmin/tinymce/tinymce_4_9_2/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: 'textarea#htmlcodigo',
height: 500,
plugins: 'codesample code',
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
toolbar: 'codesample code',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
language: "es"
});
</script>
<body>
<textarea name="htmlcodigo" id="htmlcodigo" cols="50" rows="10"><?=$row_contenido['cadspubli']?></textarea>
</body>
Usando Prism.js en tu página web
Una vez insertado el codigo con el complemento Code sample debe agregar prism.js y prism.css en su codigo para mostrar el código coloreado en tu web (Code Syntax Highlighters).
Vea tutorial Colorear código en tu página web con Prism
<!-------- Inicio Prism ---->
<!--Prism es un resaltador de sintaxis ligero y extensible, creado teniendo en cuenta los estándares web modernos. Se utiliza en miles de sitios web, incluidos algunos de los que visita a diario se utiliza
con editores Wysiwyg como Tinymce para colorear el codigo insertado como js o php con etiqueta <pre></pre>
.-->
<!--https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript-->
<link href="/js/prism.css" rel="stylesheet" type="text/css" >
<script src="/js/prism.js"></script>
<pre class="language-markup"><code> codigo a colorear </code></pre>
<!---------- Fin Prism ---->