[javascript]electron-vueでvue-markdownを使ってみた

Vue.jsJavaScript

作成中のアプリケーションで使っているelectron-vueに、vue-markdownを追加して、markdownの表示機能をつけてみました😃

PR

markdownを軽く

markdownについて書いたら長々となるので軽く。。
wiki にはこんな感じに書いてあります。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

ほとんどの方が知っていると思いますが、文章を作るときに便利な書き方です。
slackやbacklogのwikiなどいろんなところで使えるので、覚えておくと便利ですよね。wordpressでもmarkdownを使って記事を書くことができます👍

vue-markdown

vue-markdownはvueでmarkdownを使うときのモジュールです。
textareaを展開してくれて入力した内容をmarkdown形式で反映させてくれます。
公式のgithubはこちらです。

使い方

npm install --save vue-markdown

でモジュールを落としてきます。

import VueMarkdown from 'vue-markdown'
export default {
    ・・・
    components: {
       'vue-markdown': VueMarkdown
    },
    ・・・
}

使うvueファイルでimportしてcomponentsに定義しておきます。

 <vue-markdown :source="post_text_model"></vue-markdown>

表示したいところで箇所で、上記のように定義しておけば表示してくれます。
sourceが表示する内容を指定する箇所なので、textareaを作って、v-modelで指定した属性を同じようにつけておけばOKです😤

動作確認

こんな感じで、textareaに記載した内容が右のエリアに表示されます😄
前回は入れたモジュールを使いませんでしたが、これは必要なので採用したいと思います(笑)

👋

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました