What is the best way to display HTML using Highlight.js in a Vue component?

I'm working on incorporating highlight JS into my Vue project, and I am looking to display a div on the edges of my code. I've experimented with the following:

<pre v-highlightjs="viewerHTML"><div>Something here</div><code class="html">

and

<pre v-highlightjs="viewerHTML">'<div>Something here</div>'<code class="html">

However, both attempts resulted in the div section being hidden. How can I successfully display the complete code?

Answer â„–1

After some experimentation, I discovered that by creating a string in the data section of my Vue component, it was able to render correctly.

<pre v-highlightjs="viewerHTML"><code class="html">


data () {
  return {
    viewerHTML: '<div>Something here</div>'
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of Webpack to make Vue available globally

Currently, I am dealing with a situation in a legacy Rails application that has undergone some migration to integrate Webpacker and Vue. Additionally, we are utilizing a legacy script loaded through a CDN that also requires Vue. However, instead of bundlin ...

Sending cookies via POST/GET request with Credentials is not functioning

Greetings, despite the numerous duplicates of this inquiry, my attempt to solve it has been unsuccessful. Therefore, I am initiating a fresh discussion. Aside from utilizing axios, I also experimented with fetch but encountered similar outcomes. On the b ...

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

A guide on crafting a test scenario for an AngularJS controller using the Jasmine framework

I recently created an angular module called userModule.js 'use strict'; angular.module('users', ['ngRoute','angular-growl','textAngular','ngMaterial','ngMessages','ngImgCrop', ...

Is it possible to install in a directory other than the one specified in package.json

I have organized my folders exactly how I want them to be. In one specific folder, all of my configuration files reside (most importantly package.json). I am looking to install this package.json configuration in a different path, specifically c\instal ...

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

When you reach the end of the page, the loadMore function is triggered multiple times

On my webpage, I have a list of profiles that are displayed. When the user reaches the bottom of the page, more data should be loaded through the loadMore function. While the loadMore function itself works correctly, I am facing an issue with the listener. ...

Unable to display data retrieved from axios in a datatable using VueJS

I'm currently attempting to retrieve data from axios and display it in a datable component. The hardcoded data is being rendered successfully every time, but I am struggling to integrate the data from the axios call. I am fetching data in the same for ...

Troubleshooting: Issues with the functionality of ng-include in AngularJS

Hi there, I am new to angular js and I'm attempting to integrate a simple html file into my page. Below is the code I am using: <!DOCTYPE html> <html ng-app=""> <head> </head> <body ng-controller="userController"> < ...

"Unleashing the power of infinite Ajax requests upon a drop change event in Knock

I am working with Knockout MVC on my current project and encountering an issue. Whenever I try to pass the viewModel when the Drop Down changes, the method call gets invoked multiple times and the alert message "ok" keeps popping up continuously. Can som ...

Supply a JSON parameter as a variable into the .load() function

When a button is clicked, I am attempting to load a page using the .load() method with a POST request. The URL parameters are generated and displayed as JSON formatted in the button attribute btn-url. Problem: The parameter is not being passed to the .loa ...

Guide to testing Vuex Mutations with Vue-test-utils and Jest

I have reviewed a few tutorials on mocking and testing Vuex actions, but I have struggled to implement them successfully on my own. Despite following the steps outlined in the links provided, I consistently encountered an issue where toHaveBeenCalled would ...

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

Passing role data from Django Rest Framework and Djoser to the Vue frontend

I'm currently developing a basic website with a login feature. I am utilizing the Djoser library to handle authentication on the backend, and have successfully implemented the login functionality. Now, I want to create restricted access pages on the f ...

What is the process of adding an array into a JSON object using the set() function in Firebase?

I am trying to add a new item to my firebase database with a specific JSON object structure: var newItem = { 'address': "Кабанбай батыр, 53", 'cityId': 1, 'courierName': "МаР...

Disappearance of newly added row in jquery

I am currently facing an issue with a code I have written for database updates. The problem arises after adding a new row, as it initially displays but then promptly disappears. This peculiar behavior occurs on the server end when I attempt to view the p ...

Bing Map problem: p_elSource.attachEvent is throwing an error

I am encountering a significant issue with Bing Maps. The API link I am using is: Initially, I am seeing an error in firebug that looks like this: this.CreditsFor=function(a,i,j,h) { var e=[]; if(a!="undefined"&&a!=null&&typeof m_ta ...

Display only distinct items in a v-for loop in Vue.js

I am attempting to show icons based on specific v-for and v-if conditions. However, the icons are appearing multiple times when I only want them to display once. I attempted using v-if = 'index === 0', but this did not resolve the issue. <di ...

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...