Include numerical markers on text elements within a generated rmarkdown html file

I need to create a report in Rmarkdown that will be displayed as an html file due to the presence of Rshiny chunks. Is there any method available for me to insert line numbers into the document?

It's crucial for me to have line numbers for the text, and not for the code chunks, which was previously inquired about here.

I'm curious if it's feasible to apply some CSS directly to the .Rmd file below, but I lack knowledge on how to execute this.

---
title: "Title"
author: "Yourname"
date: "June 16, 2016"
output: html_document
runtime: shiny
---


This R Markdown document is made interactive using Shiny. 
Unlike the more traditional workflow of creating static reports, you can now create documents that allow your 
readers to change the assumptions underlying your analysis and see the results immediately. 

## Inputs and Outputs

You can embed Shiny inputs and outputs in your document. Outputs are automatically updated whenever inputs change.  
This demonstrates how a standard R plot can be made interactive by wrapping it in the Shiny `renderPlot` function. 
The `selectInput` and `sliderInput` functions create the input widgets used to drive the plot.

Many thanks,

Paul

Answer №1

Curious and creative, I enjoy experimenting with JS and jQuery within RMarkdown documents. Here's what I came up with:

This solution, while not foolproof, has only been tested on Firefox. Due to the messy cross-browser compatibility of jQuery, it may only work on Firefox.

Each line is now properly labeled, including normal paragraphs, unordered and ordered lists, source code, and output chunks.

Below is the fully functional document:

---
... (remaining content)...
</script>

This R Markdown document allows interactive line numbering of text content. It might not be perfect but it does look pretty nice. If you notice any bugs or have suggestions for improvement, feel free to share your feedback. This was created by a JavaScript amateur, after all.

What if there's some blank space here?

## Inputs and Outputs

Here begins another paragraph. Notice how the line numbers seamlessly transition over to this section! Amusing, isn't it? To illustrate, I must add a few more lines. So indulge me in my ramblings a little longer. NONSENSE!
Okay, let's test out some inline code and see if the line numbers continue to align. `library(ggplot2)` And a second `time()`. Seems to be holding up well.
... (remaining content)...

If you wish to exclude certain sections, simply remove the corresponding tags from the code snippet.

var $elements = $('p:not(:has(>img)), pre,  ul, ol');

If you want to omit labeling output chunks and lists, modify the line to read:

var $elements = $('p:not(:has(>img)), pre.r');

(Unlike output chunks, source code chunks are identified by the class .r.)

As mentioned, for intricate documents, you may encounter glitches. Please do inform me if you do so ;)

https://i.sstatic.net/Km1tE.png

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

Is it possible to refresh text in table without clearing icons?

Is there a way to maintain icons in table rows when editing text fields from a dialog? Currently, regardless of whether I use .html() or .text(), the icons disappear. I suspect that utilizing .content() may be a solution, but I'm unsure how to impleme ...

Show the button's value inside a div when clicked using Javascript and HTML

I am troubleshooting an issue where the value of a button is not displayed in the picked_letters div when the button is clicked, despite having the appropriate code in both the html and javascript files. The structure of the html file is as follows: < ...

`Text area label in Bootstrap not aligned properly`

Currently, I am working on a bootstrap form containing basic input fields and a few textarea elements. I am utilizing Django for my form validation process. However, I am facing an ongoing issue with aligning the validation labels under the textarea compon ...

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

Unit testing in JavaScript has its limitations, one of which is the inability to verify if a

Currently, I am working with an Angular application that includes a simple directive called animate. My goal is to use Jasmine to verify if the slideDown method is being called. Below is the current setup of my directive: animateDirective var animate = f ...

CSS dropdown menu - overlapping elements an issue?

Discover our test server here: Check out the box labeled "Organizers" on the top right corner... I've been struggling to bring the drop-down menu to the front layer. I've experimented with positioning and z-index, but so far, no success... Any ...

Looking to extract latitude and longitude data using an Autocomplete Address Form

I am currently attempting to utilize Google Maps autocomplete feature in order to save latitude and longitude. Unfortunately, I am encountering difficulties in making this functionality work as intended. Given that I am unfamiliar with the Google Maps API, ...

Retrieve the initial component of the file path

I am facing an issue with splitting a vector in a data frame. c("E:\\\\My Network Places.old.dat", "E:\\\\pagefile.sys", "E:\\\\Press_Dly_Diff_G_91.rbc", "E:\\\\TV_Press_Dly_ ...

Use PHP to process a form submission and use AJAX to send a response back to the user

Currently in the process of developing a website and I am seeking guidance on how to utilize ajax to submit form data instead of relying on the html action attribute. A PHP script has been written that may produce different outcomes, and I want ajax to not ...

What is the process for setting up redux in _app.tsx?

Each time I compile my application, I encounter the following error message: /!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore(). Although my application functions correctly, I am unsure ...

Node.js encountering difficulty extracting JSON data

Within this JSON object, the Variable SNS holds valuable information that I need to extract and save in a new variable. `const sns = event.Records[0].Sns.Message;` The specific values I aim to retrieve are Trigger.Namespace, Trigger.Dimensions.value, an ...

Avoid storing js files in cache during the development phase

When I use django runserver for development, I encounter the issue of my javascript file being cached. It's difficult to determine if the file is cached or not unless I manually add alert or console.log statements each time I make a change just to che ...

There should be a delay in the code following the ajax (code) block

Initially, my question was lengthy and accompanied by the complete code. However, it has now been condensed. function displayRecords(table) { myTable.fnDestroy(); $.ajax( { data: "tableName=" + table, url: "showTable.php", ...

Inquiring about the integration of CodeIgniter with Javascript and AJAX

Recently delving into Codeigniter and strategizing for a substantial application. Feeling a bit perplexed about CI's handling of JS files and AJAX requests. Opting for mod_rewrite with my project. In the typical webpage setup, I'd link indiv ...

Is there a way to determine if content is present within a given div element?

I have created a sample code where clicking on the "Next" button displays the next content of the page. However, if you click one more time on it when there is no content left, an empty page is shown. How can I determine whether content is available insi ...

Numeric Data Entry Format

I'm dealing with two inputs: one called "before" and the other called "after". When a value is entered in the before input, the value in the after input will be before / 1000 which means there might be 3 or more decimals at times. How can I displ ...

What exactly does the combination of {on, attrs} create within Vue/Vuetify?

Although this question may have been asked before, I am still struggling to grasp its meaning. Can you help me understand it better? <v-dialog v-model="dialog" width="500" > <template v-slot:activator=&quo ...

Struggling to understand why my React Component is failing to render properly

Could there be an issue with how I imported react or am I simply overlooking something small? Any feedback would be greatly appreciated. As a beginner in programming, I may be missing a simple solution that I'm not experienced enough to identify. Than ...

Numerals are warping inside the realm of Divination

When the numbers in my div reach more than 100 thousand, they start squeezing together like 11295551.25 <div class="col-2 text-right pr-0 "><%# Eval("CreditLimit", "{0:c}").ToString().Replace(".", ".&l ...

Playground Themed Central Menu Features

Check out the theme live preview here: I've been experimenting with different combinations of text-align: center; and margin: 0 auto; but I'm struggling to align the menu elements to the center of the page. Any assistance would be highly apprec ...