Improving the indentation of a <pre> tag using jQuery or JavaScript

I am struggling with formatting a <pre> & <code> tag in my code. The current look is:

<pre><code>somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
</code></pre>

I want it to be correctly indented, like this:

I have tried using jQuery's 'trim()' function and 'replace()' method with RegEx patterns such as:

  • /^\s*/
  • /\s*$/
  • /^\s+|\s+$/gi

However, I have not been successful. Can someone please provide guidance on how to achieve the desired formatting? Thank you!

Answer №1

It is essential to remove any leading whitespace in the HTML code, as pre element does not condense multiple whitespaces.

Answer №2

When using the <pre> tag, it will display its contents as they are written, so you may need to adjust spacing accordingly.

<pre><code>somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
      </code></pre>

This code snippet should be reformatted like this:

<pre><code>      somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
      </code></pre>

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

Utilizing React Native to Query, Filter, and Save a Single Document Field Value from Firestore Database into a Variable/Constant

My current task involves setting up a Firebase Firestore Database in order to filter it based on a specific field value within a document. The collection I am working with is named "PRD" and consists of thousands of documents, each sharing the same set of ...

The mysterious nature of view binding in Ember.js

Here's a unique challenge I'm facing. I've developed a sidebar component called SortableStopView that extends CollectionView. This sidebar contains a scrollable and sortable list of 'stops' which users can click on to navigate to t ...

Receive the Navigating event upon a new browser window opening with the help of the WebBrowser control in JavaScript

In my C# / .NET 4 project, I have a form containing a WebBrowser component that loads an external web page. An event handler is connected to the Navigating event which usually works well. However, there is an issue when a specific part of the loaded websi ...

Error message: "Unassigned value in knockout.js"

Here is my code snippet for binding to a textbox: var CategoryViewModel = { categoryModel: ko.observable({ categoryId: ko.observable(), categoryName: ko.observable(), active: ko.observable() }), GetCategoryById: functio ...

Retrieve all users along with their respective posts, ensuring that each post is also accompanied by its corresponding comments in

In my Laravel project, I have set up Eloquent models for User, Post, and Comment. The relationships are as follows: User model public function posts(){ return $this->hasMany('App\Post'); } public function comments(){ return $t ...

Having trouble including the Amplitude SDK in an Ionic 3 application

Utilizing the Amplitude SDK to gather analytics from my Ionic 3 app has been quite challenging. The TypeScript codebase and specific file structure of the app have made it more complicated than outlined in the official documentation. Despite this, I came ...

Limit Google Places auto complete to display only addresses designated for residential use

I'm in the process of developing an application that utilizes the Google Places autocomplete API. However, I specifically want to restrict user input to only residential addresses, excluding businesses and points of interest. Despite going through the ...

Errors in TypeScript are being brought up by using if-else statements inside a loop

I am currently working on a function to retrieve referral codes from users. The user inputs a code, which is then checked against the database to see if it exists or not If the code provided matches the current user's code, it should not be accept ...

Guide to accessing a particular object key within an array by leveraging the MUI multiple autocomplete feature coupled with the useState hook

How can I retrieve the id key from a selected object in a given array list and set it to the state? You can find a sandbox example at this link: https://codesandbox.io/s/tags-material-demo-forked-ffuvg4?file=/demo.js ...

Mapping JSON data from Mongoose to Vue and Quasar: A comprehensive guide

I have set up a Mongoose backend and created some REST APIs to serve data to my Vue/Quasar frontend. The setup is pretty basic at the moment, utilizing Node/Express http for API calls without Axios or similar tools yet. I have successfully implemented simp ...

Preparing my FoodApp API database with Faker requires using either import or require in separate files - cannot use both in one

I'm attempting to use the Faker npm package to populate my new database with test data in order to properly evaluate my filters. The problem arises when I try to combine both require and import in the same application. While all of my other packages r ...

Restrict certain sections of the website to authorized users only

In my game project, players are presented with two options: to play the game itself or to view global and local highscores. I have implemented a signup and login system where upon successful login, users can choose among playing the game, checking highscor ...

Difficulties arising from displaying errors when submitting empty fields

I am facing an issue with my script - the problem arises when trying to display errors. The error message appears but does not function properly, causing a break after the submit button. Essentially, if the fields are empty, an error should be displayed, a ...

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

NodeJS controller function to generate and send a response

I'm facing an issue with my controller method where I am unable to send a response to the user, even though the value is displaying in the console. Below is my code snippet: const hubHome = (req,res) => { const hubId = req.params.hubId; fetch ...

When initializing React Native, the Android, iOS, and app folders seem to be missing

https://i.sstatic.net/bkmvE.png Where have my android, ios, and app folders gone? Also, why are the index js files missing? I am currently working with React Native version 0.1.10 on a Windows 7 operating system. ...

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

Having trouble adding a test card to the Google Pay testing environment and calculating the order total

How can I display the order total in GooglePay payment sheet? I could not find any documentation on this. Is it possible to do so? Even though I am using the TEST environment, I am unable to add any test card as mentioned in the URL provided below. Additio ...

Error: Reference 'ref' is undefined in the 'no-undef' context. I am interested in experimenting with loading images from Firebase storage

While working with React, I encountered an issue when trying to fetch an image URL from Firebase Storage and display the image. The error 'ref' is not defined (no-undef) occurred. https://firebase.google.com/docs/storage/web/create-reference Th ...