Merhaba,


Bu yazıda Vue.js'de Vue2Editor ve highlight.js kullanımından bahsedeceğim.


Vue2Editor, Vue.js için geliştirilmiş bir Rich Text Editor'dür. Detaylı bilgi için bu linke bakabilirsiniz.

highlight.js ise kendi tabirleriyle 'Web için sözdizimi vurgulama (Syntax highlighting for the Web)' yapmaktadır. Daha anlaşılır söylemek gerekirse bir web sayfasında gösterdiğimiz kodlar üzerinde o kodun syntax'ına göre renklendirme yapabilmek için kullanılmaktadır. Detaylı bilgi için şu linke bakabilirsiniz.


Örnek olarak yaptığım projeyi Github üzerinden paylaştım. İndirip inceleyebilirsiniz.


Örnek proje linki


İlk olarak boş bir Vue.js projesi oluşturuyoruz:

vue init webpack-simple vue2editor-highlightjs-sample


Proje dizinine gelerek projenin çalışması için gerekli bağımlılıkları yüklüyoruz:

npm install


Vue2Editor ve highlight.js için gerekli kütüphaneleri yüklüyoruz:

npm install vue2-editor highlight.js --save


index.html dosyasını açarak highlight.js için gerekli css linkini dahil ediyoruz:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">


main.js dosyasını açarak highlight.js için gerekli directive tanımlamasını yapıyoruz:

import hljs from 'highlight.js';
Vue.directive('highlightjs', {
  deep: true,
  bind: function (el, binding) {
    let targets = el.querySelectorAll('code');
    targets.forEach((target) => {
      if (binding.value) {
        target.innerHTML = binding.value;
      }
      hljs.highlightBlock(target);
    });
  }
});
Bu tanımlama sayesinde şunu belirtmiş oluyoruz. Uygulama üzerinde açılan herhangi bir sayfada highlightjs directive'ini kullandığım bir tag varsa onu bul. İçerisinde bulunan code tag'larındaki syntax'ı tespit et ve o syntax'a göre renklendirmeyi yap.


Şimdi App.vue dosyasını açıyoruz ve içeriğini şu şekilde dolduruyoruz:

<template>
  <div>
    <div class="post">
      <!-- vue2-editor'ü ekrana yerleştirdik ve v-model ile post değişkenine bağladık. -->
      <vue-editor v-model="post"></vue-editor>
      <br>
      <!-- Editöre yazılan yazının çıktısını gösterip gizlemek için bir buton koyduk. 
           Butona basılınca show metoduna gitmesini söyledik. -->      
      <button @click="show">Göster</button>
    </div>
    <!-- Editöre yazılan yazının çıktısını göstermek için bir div açtık. 
         Bu div'e main.js dosyasında tanımlamış olduğumuz highlightjs directive'ini verdik.
         v-model ile post değişkenine bağladık.
         showButton değişkenine göre gösterip gizlemek için v-if kullandık. -->
    <div class="content" v-highlightjs v-html="post" v-if="showButton"></div>
  </div>
</template>

<script>
  import { VueEditor } from "vue2-editor";

  export default {
    // import ettiğimiz vue2-editor'ü bir component olarak belirttik.
    components: {
      VueEditor
    },
    data() {
      return {
        post: "",
        showButton: false
      }
    },
    methods: {
      /* Göster butonuna tıklayınca çalışacak olan bu fonksiyonda, 
         editörde yazılan yazıda bulunan kod kısımlarına (pre tag'ı içinde bulunan alanlar)      
         replace ederek o kısımlara <code> tag'ı ekledik.
      */
      show() {
        var find = ['<pre class="ql-syntax" spellcheck="false">', '</pre>'];
        var replace = ['<pre class="ql-syntax" spellcheck="false"><code>', '</code></pre>'];
        this.post = this.replaceArray(this.post, find, replace);
        this.showButton = !this.showButton;        
      },
      // bir string içerisinde birden fazla replace işlemi yapmak için kullanılan fonksiyon
      replaceArray(text, find, replace) {
        var replaceString = text;
        var regex; 
        for (var i = 0; i < find.length; i++) {
          regex = new RegExp(find[i], "g");
          replaceString = replaceString.replace(regex, replace[i]);
        }
        return replaceString;
      }
    }
  }
</script>

<!-- Ufak stil düzenlemeleri yaptık. -->
<style>
  .post {
    width: 850px;
    text-align: center;
  }
  .post button {
    padding: 10px;
    font-size: 15px;
  }
  .content {
    margin-top: 20px;
    padding: 10px;
    width: 850px;
    border: 1px solid #ff0000;
  }
  .ql-snow .ql-editor code {
    background-color: #23241f!important;
  }
</style>


ÖNEMLİ!

App.vue'de gerekli açıklamaları kod üzerinde yorum satırları ile yapmış olsam da anlaşılmasının biraz zor olacağını düşündüğüm şu kısımlara ayrıca değinmek istiyorum:

show() {
  var find = ['<pre class="ql-syntax" spellcheck="false">', '</pre>'];
  var replace = ['<pre class="ql-syntax" spellcheck="false"><code>', '</code></pre>'];
  this.post = this.replaceArray(this.post, find, replace);        
},

Bu işlemi yapmakta ki amacım şuydu; vue2-editor kullanarak yazılan yazıda, toolbar'da bulunan kod simgesine () tıklanarak eklenen içerikler,

<pre class="ql-syntax" spellcheck="false">
içerik
</pre>

tag'ı içerisine alınıyor. Ben de bu kısımları bularak replace ediyor ve code tag'ını ekliyorum. Böylece o kısımlar,

<pre class="ql-syntax" spellcheck="false">
<code>
içerik
</code>
</pre>

şeklinde değişmiş oluyor. Bu da bize vue2-editor kullanarak yazdığımız yazının içinde eğer kod parçacığı kullandıysak, bu yazıyı kullanıcıya gösterirken highlight.js ile renklendirme yapılmış şekilde göstermemizi sağlıyor.


Projemizi ayağa kaldırıyoruz:

npm run dev


Ve sonuç:


Umarım yararlı olmuştur.


İyi çalışmalar.