Memasukan code snippets menggunakan TinyMCE and Prism.js

Memasukan code snippets menggunakan TinyMCE and Prism.js

Code snippets adalah blok kecil dari kode yang dapat digunakan kembali, biasanya bagi programer untuk menyalin dan memasang kode yang sudah mereka tuliskode sumber terbuka, dan jawaban pada stack overflow. Jika Anda memiliki blog di mana Anda berbagi pengetahuan dengan pengembang lain, Anda mungkin dapat menguji banyak editor WYSIWYG yang menyediakan cara mudah untuk mengedit artikel Anda, mereka menyelesaikan tugas dasar mereka tetapi mereka tidak bekerja dengan cukup baik dengan Code snippets. Masalah yang tidak dimiliki orang-orang yang menulis dengan markup, bagaimana dengan mereka yang menggunakan HTML? Akhirnya TinyMCE memutuskan untuk memberikan dukungan untuk Code snippets dengan bantuan Prism.js

Beginilah cara memasukan prism.js ke TinyMCE :

  1. Masukan / sisipkan kode ini pada init tinymce.init lalu
    tinymce.init({
        ............................
        plugins: [
            ........................
            "codesample"
        ],
        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'}
      ],
      content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        'prism/prism.css'
      ],
        toolbar1: ".................",
        toolbar2: "........ | codesample",
        image_advtab: true
    });​
  2. Setelah selesai maka bukalah file ato halaman web yang menampilkan TinyMCE dan akan muncul tampilan kurang lebih seperti iniTampilan Prism-TinyMCE
  3. Klik tombol yang di beri tanda kotak merah pada gambar di atas.
  4. Kemudain kamu akan memilih jenis kode yang akan di masukan 1 dan masukan kode di bawah nya 2 seperti pada gambar di bawah iniCarra penggunaan Prism-TinyMCE
  5. Kemudian tekan ok
  6. Lalu muncul lah kode anda pada TinyMCE
Artikel Menarik Lainnya
HTML, Java Script, CSS

loading...