Adding a class to code blocks generated by knitr - css

When I knit my R markdown file to HTML via the RWordPress package, the formatting of the <pre> and <code> tags is disrupted because of other styling/plugins (I think Crayon syntax highlighter is the biggest culprit, but I'm not willing to part with it). One simple solution might be to add a class to every <pre> and <code> tag generated by Knitr, so that they can be styled separately with some CSS, but I can't determine an easy way to do this. Do any Knitr experts know how this could be done automagically? Other solutions are welcome if they are similarly simple.
EDIT: To possibly clarify, I think that what I need to be doing is overriding the default 'source' hook generated by render_html() and add a new tag that way, but I'm struggling to figure out how by reading the documentation or the examples.

You could use jQuery inside your Rmd document (which will be rendered to HTML) to add a class to every source code chunk:
<script>
$(document).ready(function () {
$('pre.r').addClass('yourClass');
});
</script>
This snippet adds the CSS class .yourClass to every <pre> element that already carries the class .r.
If you want to modify the <code> child of those elements use
<script>
$(document).ready(function () {
$('pre, .r').children('code').addClass('yourClass');
});
</script>
From here on it is up to you how you style your yourClass code chunks with CSS.

Related

Easy Admin Bundle. Trix Editor. Change wrapper tags of code sections. <pre> -> <pre><code>

I'm using the Easy Admin Bundle for a mini Symfony app.
The bundle comes with the trix editor for the text_editor field input.
The editor is pretty cool and offers a code feature that encapsulates the paragraph in <pre> tags. The issue is I'm using highlightjs on frontend to make my code sections pretty. Now highlightjs requires code be encapsulated in <pre><code> ...code here... </code></pre> tags which is a bummer.
Is there any way to control in which tags are code sections encapsulated with the trix editor. In my specific case from <pre> to <pre><code>?
I had the exact same problem, and unfortunately I couldn't figure out how to update the Trix source code to add the code element in the pre element and also add the class. I asked the question here, and I'm going to open an issue to see if the nice folks over at Trix would consider adding this functionality.
So, I put together a little hack that will transform the pre elements when I display them to the user. Here is what the code looks like:
const applyFormattingToPreBlocks = function () {
const preElements = this.showPostBody.querySelector('.trix-content').querySelectorAll('pre');
preElements.forEach(function(preElement) {
const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
const codeElement = document.createElement('code');
if (preElement.childNodes.length > 1) {
console.error('<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.')
}
let preElementTextNode = preElement.removeChild(preElement.firstChild);
let language = preElementTextNode.textContent.match(regex);
if (language) {
language = language[0].toString().trim();
preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '');
codeElement.classList.add(language, 'line-numbers');
}
codeElement.append(preElementTextNode)
preElement.append(codeElement)
})
};
I also wrote up a blog post that goes into more detail about what this code is doing. I using Rails 6 and the post has an example of what the formatting looks like. Let me know if you have questions.

Why not do without the body tag and use Meteor.startup template instead?

Using meteor release blaze-rc1, does this make sense:
client side
Meteor.startup(function () {
UI.insert(UI.render(Template.main), document.body);
});
<template name="main">
this is the starting template
</template>
Are there side effects? Seems to work fine, and I don't have to worry about chasing down the body tag mixed in my templates. Sorry if this is a noob question, it's my first project with meteor.
Having body tags sprinkled in your code (and head tags for that matter) and expecting it to land in the correct order, feels a little bizarre. Must be my file / page world view.. perhaps I'm just old.
If you don't specify a body tag Meteor automatically puts one in and then renders your template within that body tag.
I don't see any reason why you would really need to include the <body> tag at all. It certainly doesn't seem to do any harm.

How can I add an "onclick" in an input tag?

I am trying to insert
onclick="countCheckboxes()"
within the input tag. Is there any way to do this in CSS? I tried the following, but didn't work:
input[type=checkbox]:after {
content: "onclick="countCheckboxes()"";}
So that it would eventually output this
<input type="checkbox" onclick="countCheckboxes()">
This is for a Wordpress form. Maybe I could add something in the functions.php template to enable me to do this?
You cannot generate Javascript in css. Please refer to this for more information: Using Javascript in CSS
I am guessing that you want to keep your markup clean of JS? If so, the best thing would be to abstract the JS from your markup in a separate js file. There you can navigate the dom and append functions whichever way you require. You can do this with either vanilla Javascript or a JS framework(like Jquery) which simplifes the process a lot.
I'm happy to set up a demo if you wish to learn how.

Syntax highlight plugin without JS, pure CSS

i want to display some source code on ajax loaded page via Facebox plugin.
But if i try to add script tag
<script src="src/prettify.js"></script>
Facebox remove all script tags in loaded page.
So i need pure CSS based solution for syntax highlighting or solve removing of script tags by facebox.
Thx for any help.
Browsers don't execute script tags pulled in via AJAX: Inline jQuery script not working within AJAX call
The CSS only solution would be to manually wrap your code in spans and set all the coloring in CSS, which is definitely not ideal.
The best solution here would be to include <script src="src/prettify.js"></script> on the main page doing the Facebox ajax calls and just making sure that prettify is triggered on the AJAXed content after it's pulled in like so:
$(document).bind('beforeReveal.facebox', function() {
prettyPrint();
});

How to add code area css style to HTML

I am trying to create a blog in wordpress. Since I might need to add some code blocks to my posts, I was wondering if there is any CSS style to represent code block.
A very simple example would be stackoverflow code tag (shown below)
<script type="text/javascript">
alert('this is example of what i need to do ') ;
</script>
Since you are using wordpress, there are plugins to do that. Just by looking at http://wordpress.org/extend/plugins/tags/syntax-highlighting there seems to be quite a few to choose from.

Resources