preface

Recently in the school time (peak autumn recruit ha ha ha), found a geek style very strong company AfterShip (guest) love, first attract me is thick programmers style, in the recruitment website, they’ll use the code describes the job details, the visual rendering should be a TAB, in the four development technology in the label, Select your favorite item (this is programmer romance)

What attracts me more is their recruitment page, which has a cool animation. You can click the link to see it. As a front-end, AfterShip’s official website has no resistance to such cool websites.

So I thought I would use vue3+ Vite to implement a simple document line by line, without saying a word, open hammer.

Demand analysis

First OF all, I looked at the source code address of the website. The way to achieve this is to read the MD document and style document as strings through Webpack, and then render it line by line, and then modify the style or layout at the specified time. It also encapsulates some animation and rendering functions but does not use all of them. It should be a general method.

So I took one of the MD documents and used it as text. All I needed to do was read the MD document using Vite, convert the MD document to HTML and render it line by line.

Function implementation

Start with a new Vite project and drag in the data.md file from SRC. Since this is just a simple effect, MY code is written directly in app.vue

First we need to read the md file in the project, this is through vite to read the MD file as a string, this step is very simple, we just need to import a file on the basis of the normal file? The RAW suffix converts the contents of a file to a string when it is imported.

import dataMd from "./data.md? raw"
Copy the code

Next we need to convert the contents of the MD document to HTML. We need to use the MarkDown library and introduce a MarkDown style.

The installation

yarn add markdown
yarn add github-markdown-css
Copy the code

The introduction of

import 'github-markdown-css/github-markdown.css'
import dataMd from "./data.md? raw"
import markdown from 'markdown'
const dataRaw = markdown.parse(dataMd)
Copy the code

All you need to do is set an interval to render the text verbatim! HTML rendering we use V-HTML complete code as follows

<template>
  <div class="container markdown-body" v-html="data"></div>
</template>

<script setup>
import {ref} from 'vue';
import markdown from 'markdown'
import 'github-markdown-css/github-markdown.css'
import dataMd from "./data.md? raw"

const dataRaw = markdown.parse(dataMd)
const data = ref("")
const showCode = () = >{
  let current = 0
  const interval = setInterval(() = >{
  if(data.value.length < dataRaw.length){
    data.value += dataRaw[current]
    current++
  }
  else{
    clearInterval(interval)
  }
},5)
}
showCode()

</script>

<style>
.container{
  width: 600px;
  background-color: whitesmoke;
  margin: 0 auto;
  padding: 20px;
  transition: all .3s;
}
</style>

Copy the code

Implementation effect

conclusion

This is just a very simple implementation, really want to do to be more perfect automatic scrolling can join again apply colours to a drawing, or on the left side of the display source code on the right side of the compiled effect, you can also at the back of each line with a | to imitate the effect of a mouse cursor, according to individual demand is OK, we look forward to the final into early AfterShip screen.

I am Oil. I will post original articles every week. I look forward to your attention!