output-verbatim

A js library that allows you to output your messages verbatim, such as in chatting.

Fuctions

• Used to output messages in chat to achieve verbatim printout.

The effect is as follows：

Usage

<template>
  <p v-html="content"></p>
</template>
<script setup>
import OutputVerbatim from 'output-verbatim';
import { ref, onUnmounted } from 'vue';

const content = ref('');
const output = new OutputVerbatim(
  '<b>H</b>ello, <b>W</b>orld!  <b>T</b>he <b>I</b>s <b>O</b>utput <b>V</b>erbatim.',
  {
    speed: 30, // Printing speed per word, 30 milliseconds a word, a cycle
    // Output one word per cycle, rich text will contain labels
    eachRound: function (currText) {
      console.log(currText);
      content.value = currText;
    },
    // Can be used to fix the problem of incorrect tags in Markdown syntax
    complete: function (finalText) {
      console.log(finalText);
      console.log('complete');
    },
  },
);

onUnmounted(() => {
  output.stop();
});
</script>

<style lang="scss">
p {
  letter-spacing: 4px;
  // text-align: center;
  font-size: 1.25rem;
  line-height: 1.5;

  b {
    font-size: 1.125em;
    font-weight: bold;
    background: linear-gradient(180deg, #c191ff 0%, #4584ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 6px;

    &:first-child {
      margin-right: 0;
    }
  }
}
</style>

Frequent call scenarios:

<template>
  <p v-html="content"></p>
</template>
<script setup>
import OutputVerbatim from 'output-verbatim';
import { ref, onUnmounted } from 'vue';

const chartText = ref('');

// Encapsulation method for verbatim output
let output = null;
const verbatimOutput = (text, start) => {
  // chartText.value = '';
  let index = 0;
  // Stop previous output
  if (output) {
    output.stop();
  }
  output = new Verbatim(text, {
    speed: 30,
    start: start >= 0 ? start : 0,
    before: (preText) => {
      chartText.value = preText;
    },
    eachRound: (currText) => {
      console.log(currText);
      chartText.value = currText;
    },
    complete: (finalText) => {
      chartText.value = finalText;
    },
    markdown: true,
  })
};

// mock async call
let index = 0;
let content = '';
const timer = setInterval(() => {
  const start = content.length;
  content = content + Array(5).fill(index).join('');
  verbatimOutput(content, start);
  index++;
  if (index > 10) {
    clearInterval(timer);
  }
}, 100);

onUnmounted(() => {
  output.stop();
});

Options

property	description	type	default
speed	Printing speed per word. One word, one cycle.	Number	30
start	Start print begin at the index of the string, default is 0	Number	0
rich	Whether it is rich text, if so HTML tags are output directly.	Boolean	true
markdown	Whether the characters are converted to HTML according to markdown syntax.	Boolean	false
endLineBreak	Whether to add a line break at the end of the string.	Boolean	false
eachRound	Output one word per cycle, rich text will contain labels	Function	undefined
before	Callback function before printing starts, can be used for initialization operations	Function	undefined
complete	Callback function at the end of the print that can be used for cleanup operations	Function	undefined

Note: Input text can currently support rich text, but only one level, not nested. Such as <b>bold<i>italic</i></b> ，output will be <b>bold<i>italic</b> but not <b>bold<i>italic</i></b> Therefore, the italic effect only takes effect at the end when it is fully printed.

License

MIT