highlight.js: CSS styling absent after setting innerHTML - javascript

I am using highlight.js for syntax highlighting in a webpage.
When I change the content by setting the relevant innerHTML using JavaScript, the content output on the page updates as expected. However the changed content is not highlighted in the browser.
What is the correct way to deal with this situation, generally or with highlight.js using only JavaScript, HTML and CSS?

I found a solution thanks to #Afsar's insightful comment.
The function initHighlighting from highlight.js:
initHighlighting()
Applies highlighting to all <pre><code>...</code></pre> blocks on a page.
... contains an internal check to see whether it has already been run. Since I was attempting to run it more than once, highlighting was not working correctly.
So one possible solution to updating highlighting after updating content via JavaScript with no page reload is:
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);

Related

Force ignore Prettify within Redactor Editor?

I am currently looking for a way to implement prettify into my website to allow for code snippets to be posted within the content of pages.
The Problem:
I am using Redactor WYSIWYG and this is causing some problems within the editor (prettify styles the code block within the editor, adding the styled html to the HTML view as well as the submission of the content to the database)
Is there any way to force redactor to ignore the prettify styling when editing content, and only have the styling applied to the final submitted content (when displayed on a page).
Display Example: Prettify on front end only (no styling submitted with the content).
Editor Example: I don't want the editor to be prettified.
Problem Example: This is why I don't want the editor to apply prettify.
The problem with this is, when you come back to edit the article it applies the prettify styling within the content, and then that styling displays as plain text (as part of the content of the code snippet).
Is there any way to force ignore prettify within Redactor or a work around to my problem?
Prettify source: https://github.com/google/code-prettify
Redactor: http://imperavi.com/redactor/
For anyone else interested in using Prettify in conjunction with Redactor on their website, I resolved my issue with the following javascript:
$(document).ready(function() {
if (!$('#redactor').length){
//Redactor Editor Not Found
var x = document.createElement('script');
x.src = 'js/prettify/run_prettify.js?autoload=true';
document.getElementsByTagName("head")[0].appendChild(x);
}
});
On load, the script will look for anything containining id="redactor" and if it is not found, it then loads the prettify script, otherwise if redactor is found (meaning you have an editor on the page), it is never loaded.
This keeps redactor from inheriting prettify styling within the editor and submitting it within your content.

How do I see what javascript modifies a particular bit of HTML?

When I load a page, there is a style attribute that has been added to the <body> tag that is not there in my templates. How do I discover what javascript has modified it?
Just to be clear, the body tag is now:
<body class="home page" style="margin-top: -43px;">
So the style is not coming from a style sheet. While the template does not include the "style=" bit at all. So I'm pretty sure that some running javascript is modifying the body tag.
I have both Firefox/Firebug and Chrome Inspector available to me. I have tried right clicking on the body tag in "HTML"/"Elements" view and choosing "break on attributes modification" but the change has happened by the time I can do that, and the break point does not survive a page reload.
I'm using Django and jQuery in case that alters the answer.
I currently use an extension of Firebug called FireDiff you can file its homepage here: http://www.incaseofstairs.com/firediff/
You could use mutation observers.
Try adding this code as the first thing that gets executed on page load:
var target = document.querySelector('body'),
observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
debugger;
});
});
  
observer.observe(target, { attributes: true });
As a side note, it'd be great if that particular kind of breakpoints survived page reload.
There is the possibility it is added server side too. If you search your source files for the stylesheet name it should appear in either a JavaScript or a Python file. i.e. grep for "mystylefile.css"
You could disable JavaScript and see if it is still added if you want to narrow it down.
Update
Finding what added the margin-top to the element will be harder! You could search your JavaScript files for "margin-top" and see how many results you get back - or add the JavaScript files one by one until one causes it to be added.

How to 'unrender' MathJax equations?

We all know that MathJax renders elements on window onload by default (and can be refreshed using MathJax.Hub.Queue(["Typeset",MathJax.Hub]); Reference Link), but is there a way to 'unrender' the elements? So for example, after the page just loaded, I can click a button, and all the elements will turn back into their TeX code. Is that possible?
Well, the original TeX code is stored by MathJax, so you can use some javascript to put it back. There is an example of how to do this on the MathJax users forum that I think may be what you are looking for.
It seems that MathJax hides the original LaTeX code in an element called MathJax-Element-x, which contains the original code. So what I did was simply hide all elements with the class MathJax_Display, in which the formatted version appeared, and showed all elements starting with MathJax-Element-. Seemed to work fine.
EDIT: Instead of selecting MathJax_Display elements, I had to select all the elements inside MathJax_Display, like MathJax_Display *. I also had to change the type of element the LaTeX code was put in, as it was in a script.

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

Categories