ChatGPT에게 물었습니다. Markdown Editor

ChatGPT에게 물었습니다.
그리고 시키는 대로 해 봤습니다.

1. ChatGPT에게 물었습니다.

Vue를 사용하여 markdown editor 사용 예제를 만들어줘.
Create an example of using markdown editor using vue.

Sure! I'll provide a complete example of a Vue application that uses the MarkdownEditor component. This example will set up a Vue project, create the Markdown editor component, and use it in the main application.
네! 'MarkdownEditor' 구성 요소를 사용하는 Vue 애플리케이션의 전체 예를 제공하겠습니다. 이 예제에서는 Vue 프로젝트를 설정하고 Markdown 편집기 구성 요소를 생성하여 기본 애플리케이션에서 사용합니다.

Step 1: Set Up the Vue Project

If you haven't already set up your Vue project, follow these steps:
Vue 프로젝트를 아직 설정하지 않은 경우 다음 단계를 따르세요.

1. Install Vue CLI (if not already installed):

npm install -g @vue/cli

 

2. Create a new Vue project:

vue create markdown-editor

 

3. Navigate to your project directory:

cd markdown-editor

 

Step 2: Install Necessary Packages

 

1. Install marked and highlight.js for Markdown parsing and syntax highlighting:

npm install marked highlight.js

 

2. Install Font Awesome for icons:

npm install --save @fortawesome/fontawesome-free

 

Step 3: Create the Markdown Editor Component

Create a new file named MarkdownEditor.vue in the src/components directory:
‘src/comComponents’ 디렉터리에 MarkdownEditor.vue라는 새 파일을 만듭니다.

<template>
  <div class="markdown-editor">
    <div class="toolbar">
      <button @click="applyBold" title="Bold"><i class="fas fa-bold"></i></button>
      <button @click="applyItalic" title="Italic"><i class="fas fa-italic"></i></button>
      <button @click="applyHeading1" title="Heading 1"><i class="fas fa-heading"></i><span>1</span></button>
      <button @click="applyHeading2" title="Heading 2"><i class="fas fa-heading"></i><span>2</span></button>
      <button @click="applyHeading3" title="Heading 3"><i class="fas fa-heading"></i><span>3</span></button>
      <button @click="applyLink" title="Link"><i class="fas fa-link"></i></button>
      <button @click="applyImage" title="Image"><i class="fas fa-image"></i></button>
      <button @click="applyList" title="Unordered List"><i class="fas fa-list-ul"></i></button>
      <button @click="applyOrderedList" title="Ordered List"><i class="fas fa-list-ol"></i></button>
      <button @click="applyCode" title="Code"><i class="fas fa-code"></i></button>
    </div>
    <textarea v-model="markdown" @input="updateMarkdown"></textarea>
    <div v-html="html" class="preview"></div>
  </div>
</template>

<script>
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  data() {
    return {
      markdown: ''
    };
  },
  computed: {
    html() {
      return marked(this.markdown, {
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        }
      });
    }
  },
  methods: {
    updateMarkdown() {
      this.html = marked(this.markdown, {
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        }
      });
    },
    applyBold() {
      this.wrapSelection('**', '**');
    },
    applyItalic() {
      this.wrapSelection('*', '*');
    },
    applyHeading1() {
      this.insertAtStartOfLine('# ');
    },
    applyHeading2() {
      this.insertAtStartOfLine('## ');
    },
    applyHeading3() {
      this.insertAtStartOfLine('### ');
    },
    applyLink() {
      const url = prompt('Enter the URL:');
      if (url) {
        this.wrapSelection('[', `](${url})`);
      }
    },
    applyImage() {
      const url = prompt('Enter the image URL:');
      if (url) {
        this.wrapSelection('![', `](${url})`);
      }
    },
    applyList() {
      this.insertAtStartOfLine('- ');
    },
    applyOrderedList() {
      this.insertAtStartOfLine('1. ');
    },
    applyCode() {
      this.wrapSelection('```\n', '\n```');
    },
    wrapSelection(before, after) {
      const textarea = this.$el.querySelector('textarea');
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const text = textarea.value;
      const selectedText = text.substring(start, end);
      const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
      this.markdown = newText;
      this.$nextTick(() => {
        textarea.setSelectionRange(start + before.length, end + before.length);
        textarea.focus();
      });
    },
    insertAtStartOfLine(insertText) {
      const textarea = this.$el.querySelector('textarea');
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const text = textarea.value;
      const before = text.substring(0, start);
      const after = text.substring(end);
      const startOfLine = before.lastIndexOf('\n') + 1;
      const newText = before.substring(0, startOfLine) + insertText + before.substring(startOfLine) + after;
      this.markdown = newText;
      this.$nextTick(() => {
        textarea.setSelectionRange(start + insertText.length, start + insertText.length);
        textarea.focus();
      });
    }
  }
};
</script>

<style scoped>
.markdown-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.toolbar {
  display: flex;
  justify-content: flex-start;
  background: #f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.toolbar button {
  background: none;
  border: none;
  margin-right: 10px;
  cursor: pointer;
}
.toolbar button span {
  font-size: 12px;
  vertical-align: super;
  margin-left: 2px;
}
textarea {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  border: none;
  border-right: 1px solid #ddd;
  resize: none;
  outline: none;
}
.preview {
  flex: 1;
  padding: 10px;
  overflow: auto;
  background: #fff;
}
</style>

 

Step 4: Use the MarkdownEditor Component in App.vue

Modify App.vue to include the MarkdownEditor component:
‘MarkdownEditor’ 구성 요소를 포함하도록 App.vue를 수정합니다.

<template>
  <div id="app">
    <MarkdownEditor />
  </div>
</template>

<script>
import MarkdownEditor from './components/MarkdownEditor.vue';

export default {
  name: 'App',
  components: {
    MarkdownEditor
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

Step 5: Run Your Project

 

1. Start your development server:

npm run serve

 

2. Open your browser and navigate to http://localhost:8080 to see your Markdown editor in action.

 

Example Usage

 

Bold Text:

Select the text you want to make bold.
Click the Bold button in the toolbar.

 

Italic Text:

Select the text you want to italicize.
Click the Italic button in the toolbar.

 

Headings:

Place the cursor at the beginning of the line.
Click the Heading 1, 2, or 3 button in the toolbar.

 

Links:

Select the text you want to turn into a link.
Click the Link button and enter the URL in the prompt.

 

Images:

Place the cursor where you want to insert an image.
Click the Image button and enter the image URL in the prompt.

 

Lists:

Place the cursor at the beginning of the line.
Click the Unordered List or Ordered List button.

 

Code Blocks:

Select the text you want to format as code.
Click the Code button.

The Markdown editor will update the preview as you type and format the text. This provides a basic but functional Markdown editor with toolbar icons for common Markdown functions. You can further enhance it by adding more features and styling.

Markdown 편집기는 텍스트를 입력하고 서식을 지정하면 미리보기를 업데이트합니다. 이는 일반적인 Markdown 기능에 대한 도구 모음 아이콘이 포함된 기본적이지만 기능적인 Markdown 편집기를 제공합니다. 더 많은 기능과 스타일을 추가하여 더욱 향상시킬 수 있습니다.