Html code broke when shiny upgraded to bootstrap 3 - html

When Shiny upgraded to bootstrap 3, some of my programs looked wonky as a result. So I used shinybootstrap2 for backward compatibility. Unfortunately, there's still a chunk of code that's not being displayed properly (see column Link in the snapshot below). Before the upgrade, this column used to display hyperlinks which take the user to an external website upon clicking. However, now they are just being displayed as text and do not behave interactively. Here's the code I used to populate the column:
paste('<a href = ', shQuote(url), '>', 'Click</a>')
the url is just another variable where the actual link address is stored.
Any clue/thoughts as to why this might be happening?

Try this to allow parsing of links...
output$table <- renderDataTable({
get_table()
},escape=FALSE)
Or escape individual columns as indicated in the documentation

Related

How do I fix the encoding of the quotes?

I am using the free plan of the wordpress.com platform to host reference information on a small site. The goal is to be able to copy the code from the site page and place it in your own IDE, such as VSCode. Since the plan is free, all Wordpress features have been cut to a minimum, including the installation of plugins. It is possible to use only standard blocks such as HTML, Code, Classic Editor, etc. When it became necessary to publish highlighted code, I did not find anything better than to copy it from my code editor and convert it to HTML, then insert it into Wordpress standard HTML block. And for the first time everything was fine, i.e. I was able to copy a block of highlighted code from a page on my site and paste it into the VSCode code editor. And the code was displayed in the same way as on the page. But suddenly, everything changed and the following problems arose: the single quotes character (') began to display as an opening single quote (‘) and a closing single quote (’), which makes the code inoperable and needs to be edited, which is extremely inconvenient:
describe(‘Examples for Querying commands’, () => {
before(‘Navigate to querying page’, () => {
cy.visit(‘https://example.cypress.io/commands/querying‘);
});
// Скопируйте интересующий вас пример и вставьте его здесь
});
Double quotes began to display incorrectly on the site itself. Instead of ("), they began to display as (»):
cy.get(‘[data-test-id=»test-example»]’)
What could such a metamorphosis be connected with? It happened after the next resave of the edited page. The single quote character is encoded on the page as &apos replacing it with the symbol (') itself does nothing either. You can watch it here: https://kitchensinkcypress.wordpress.com/%d0%bf%d0%be%d0%b8%d1%81%d0%ba-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d0%be%d0%b2/. The site is under construction. Please tell me how I can overcome it?
I am not sure if I can treat this as an answer, but it would be an answer if this is Wordpress bug. I found out that the reason of the issue is page update. Steps to reproduce:
Create html snippet for the highlighted code example.
Save it into html file, open the file in browser and ensure that all characters are displayed properly.
Create HTML block on the page and insert there the content of the mentioned html file.
Open the page in browser and insure that the code is displayed properly.
Copy the code snippet from the page and paste it into VSCode editor. Ensure that the code is displayed properly.
Now make any changes anywhere on the web page except of the mentioned HTML block and press Save button.
Expected result: The mentioned code snippet is still displayed properly as no changes were maid inside its HTML block.
Actual result: The snippet has been corrupted. Double quotes (") is turned into (»), single quotes are displayed as opening single quote and closing single quotes if being copied from the page and pasted to VSCode editor:
cy.get(‘[data-test-id=»test-example»]’)
which makes the code not usable. So I believe that this is a Wordpress bug as we have two different results for displaying of the same block of the html code without any user manipulation over this block.

Markdown TOC with Special Characters?

I am trying to create a TOC for my Markdown blog.
The methods I am finding here... : Markdown to create pages and table of contents?
....do not work for me because I am naming all of my headers # _</>_ The Setup because I am using CSS on to style the "", giving each header a nice colored Icon next to it. If I simply use ```# The Setup ```` it works great.
This causes issues whenever I try to use [The Setup](#The-Setup).
I tried a few things like [The Setup](#_</>_-The-Setup) and other things, but I can not get it to work.
If someone can point me in the right direction I would greatly appreciate it. Also, if anyone has a better way of adding custom icons next to headers, I think that would be the better way to go about it.
As always, thanks in advance.
The general solution is to examine the rendered HTML output to see what the tool is converting the special characters to, in the HTML's element ID. Every tool could handle the conversion differently (it could convert special characters to -, _, or just remove special characters). Some examples:
<h1 id="_____the-setup">The Setup</h1>
<h1 id="-the-setup">The Setup</h1>
<h1 id="the-setup">The Setup</h1>
Once you have identified the exact id that the tool is using, then you use that value as the heading link in the markdown's table of contents. For example:
[The Setup](#_____the-setup)
Now, the tricky part is that not all Markdown tools will export the rendered HTML, including VS Code. The workaround for VS Code is:
Open the markdown preview mode (which renders to html internally).
Open the VS Code Developer Tools (Help > Toggle Developer Tools).
Use DevTools to inspect the element (in this case, the heading element for "The Setup").
I see that VS Code named the id as the-setup, so in the markdown's table of contents, I write [The Setup](#the-setup). Now the table of content hyperlink works in VS Code. Caveat: it might not work in other Markdown tools if they render a different HTML element ID!
Another shortcut now available in VS Code (1.70 July 2022), is that markdown can autocomplete the header ID. So you just type #, and it will list the valid IDs:

Check for visual presence of character on page?

I'm in an odd situation where I need to check, via a test, that a currency symbol is being properly displayed on our web page.
We've been running into issues where sometimes the unicode alphanumeric value is showing up on the page instead of the actual currency symbol itself.
Is there a way to check for something like this? Like with some type of visual checking library, or through javascript?
The answer to this issue was to specifically copy and paste the unicode character I was looking to test against into my text editor.
So using the Protractor framework, I would find my css element, and if I have a known price of 17.99 that should be returning, my test function would return:
return expect(myPriceElement.getText()).to.eventually.equal(£17.99);
If on my webpage, £17.99 shows up, then my test will pass

HTML link to a certain point in a webpage - slight twist

Here's the use case: A user clicks on a link that opens a window displaying the contents of a text log. Easy enough. But is there a way of using POST, to open that text log to a certain location (i.e., search for a particular timestamp given in the post, and show the file at that specific location)?
(Assume I can't put html tags inside the text log -- it's a raw file).
Template of log:
+++ 2009/06/19 10:47:12.264 ACTION +++
+++ 2009/06/19 10:49:12.111 ACTION +++
So I want the page to load a specific timestamp.
Thanks,
Michael
Why can't you just have a php or perl or simlar script that processes the log file on the spot, and sticks in html anchors and calls it a day?
Doing on the spot processing would also allow you display a trimmed down copy of the log thats only relevant to the timespan around the event in question.
Since you can't modify the file, the only way would be to wrap it in a <frame> or an <iframe> and drive the searching and scrolling from JavaScript in the neighbouring/containing page.
Here's an example, which you can try out online at http://entrian.com/so-container.html
<html><head><script>
function go() {
// "line" is the <input> for which line to jump to; see the HTML.
var line = document.getElementById('line').value;
if (document.body.createTextRange) { // This is IE
var range = frames['log'].document.body.createTextRange();
if (range.findText(line)) {
range.select(); // Scroll the match into view and highlight it.
}
} else { // Non-IE. Tested in Firefox; YMMV on other browsers.
frames['log'].find(line); // Scroll the match into view and highlight it.
}
}
</script></head><body>
<input type='text' size='5' name='line' id='line' value='10'>
<button onclick='go()'>Go</button><br>
<iframe name='log' width='100' height='50' src='so-data.txt'>
<!-- so-data.txt contains the numbers 01-20 on separate lines -->
</body></html>
I've tested that in IE7 and FF3; I'd be surprised if it worked elsewhere without edits, but you never know your luck!
Obviously in your case you'd be driving the scrolling programmatically rather than via an <input> box, but you can see how it would work for you.
If you could put some tags around the file's text, then you could probably insert some javascript that would scroll the window after loading it.
Yes, but passing your parameters via a querystring would be a whole lot simpler.
To scroll to a certain position in the text file you will need to user javascript (overly complicated in my opinion) or add an html anchor tag.
If you were planning to post the raw text log in a window, you will also run into some difficulty as HTML will not recognize the newlines and run the log together into one blob.
have you tried
window.open ('log.txt');
window.scrollTo (0, window.scrollMaxY);
? From mozilla reference : https://developer.mozilla.org/en/DOM/window.scrollMaxY
Keep a 'living copy' of the log file that has been translated to HTML - every time the original file is modified (or simply every X seconds), check for and append the newest lines with HTML anchors applied to the HTML version.
A new feature was added to Chromium waaaaay back in 2020 that allows you to link to ANY location on any webpage.
At the time of this writing, it works for sure in Chrome and Opera but not yet in Firefox, Safari or Brave browser.
The trick is to add:
/#:~:text=
and follow the equal sign with the desired search text, replacing any spaces with %20. Example:
There is no ID near this location on the page
<div>IMPORTANT: Use Opera or Chrome to open above link</div>
For more information:
Linking to a specific part of a web page

Printing an HTML email that contains a table longer than 1 page

When I try printing an HTML-email with a table that stretches multiple pages then Windows-Mail and IE7 will only print whatever fits on the first page but Firefox prints everything just fine.
Any thoughts how I can make the Microsoft products print the entire thing?
Regards, Pieter
If this is just for a one-off email, you can try one of the following:
1) Click on file > print to ensure you get the print dialog box
2) Ensure that "all pages" is selected in the print dialog
3) Confirm the print job
or
1) Copy and paste the email into another application, such as Word and print the document from there.
If this is not a one-off issue, you could look at generating the information as a printable attachment, for example PDF format - which gives you more control over print-layout than HTML does.
I just dove into the problem again and found out that Internet Explorer and windows mail as well (same html engine?) cannot handle nested tables (a table inside the cell of another table) very well when it comes to printing them.
Removing the nested tables from the html-email solved the problem (and created another one but i was able to solve the layout issues without nested tables nicely ;) )