Problems Adding Syntax Highlighter To Blogger - javascript

I'm trying to add Syntax Highlighter to my new blog at blogger. For some reason I keep getting these errors:
Uncaught ReferenceError: SyntaxHighlighter is not defined Uncaught
ReferenceError: XRegExp is not defined shCore.js:123 Uncaught
TypeError: Cannot read property 'config' of undefined
Here is my code:
<script src='https://xarpixels.googlecode.com/files/shAutoloader.js'/>
<script src='https://xarpixels.googlecode.com/files/shCore.js'/>
<script type="text/javascript">
$(document).ready(function(){
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
'js https://xarpixels.googlecode.com/files/shBrushJScript.js',
'php https://xarpixels.googlecode.com/files/shBrushPhp.js',
'sass https://xarpixels.googlecode.com/files/shBrushSass.js',
'sql https://xarpixels.googlecode.com/files/shBrushSql.js',
'xml https://xarpixels.googlecode.com/files/shBrushXml.js',
'css https://xarpixels.googlecode.com/files/shBrushCss.js'
);
SyntaxHighlighter.all();
});
</script>
To me, everything looks correct?
EDIT: I noticed that when I change the path to any of the files in the demo, the script breaks and doesn't work. This isn't making any sense at all...

I followed this method here: http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It may not be using the autoloader(as I want to prevent http requests), but it gives me a working example to work from and perhaps I can get the autoloader working.
Thanks.

Easy alternatives using highlight js will be very easy and has many very interesting views
for demo see here from the official website
<!– Syntax highlighter –>
<link href=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/>
<script src=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/>
<script>hljs.initHighlightingOnLoad();</script>
<!– end Syntax highlighter –>

Related

Why there exist error Uncaught ReferenceError: $ is not defined if add async?

My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?
First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.
You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">

Can't figure out where this syntax error is

JS
<script type="text/javascript"><![CDATA[ jQuery(".track").hide();jQuery(document).ready(function() {jQuery(".track").show();});]]></script>
Console says
Uncaught SyntaxError: Unexpected token <
What is the issue with the syntax? I don't see it.
I'm assuming it really means everything inside the <script> tags, since it starts off with a <
Not sure how to get to this file to fix, I'm thinking something/plugin is injecting this, but how do I find out what is causing it?
Is there any easier fix?
Thanks
This would fix the error if for some reason you insist on using CDATA, but again its not needed because the page is very HTML5
<script type="text/javascript">
//<![CDATA[
jQuery(".track").hide();jQuery(document).ready(function() {jQuery(".track").show();});
//]]>
</script>

blogger.com function load uncaught referenceerror $ is not defined

My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Plugging in a jQuery plugin

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

Twitter Bootstrap + Mootools + JQuery.NoConflict() problems while trying to use popover

I have mootools and Twitter Bootstrap (which uses JQuery for their Javascript capabilities) working nearly "well" using JQuery.NoConflict() inside the bootstrap-dropdown.js .
Well, now I'm trying to use bootstrap-popover.js and it's not working as smoothly as bootstrap-dropdown.js. Well I guess that it's a compatibility mode issue that I cannot understand pretty well.
I have this javascript with error:
<script type="text/javascript">
$(function () {
$('td[rel=popover]')
.popover({
offset: 10,
live: true
})
.click(function(e) {
e.preventDefault()
})
})
</script>
And the error is:
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
EDIT:
I've successfully used popover before (but not with mootools) and i tried to repeat the same way and codes. Just before this javascript code with error, i'm linking the files like this (which are successfully loading):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../js/html5.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-alerts.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
I know that it should be better between <head></head> but it should work as well inside <body> And it is working for other bootstrap-alerts.js and dropdown.
Also, I'm calling the popover this way in a <table>:
<thead>
<tr>
<th>Título</th>
<th>Data</th>
<th>Horário</th>
<th rel="popover" data-original-title="A title" data-content="And here's some amazing content. It's very engaging. right?">Ticket Associado <img src="../img/alert-icon.gif"></th>
<th>Entrar no Chat</th>
</tr>
</thead>
And mootools are being called after twitter-Bootstrap/JQuery.
Any help? Thank you so much in advance!
erm. seems as if there's an issue with the twitter popover code, more likely than anything.
Property '$' of object [object DOMWindow] is not a function - sounds as if the $ is not what you think it is. I thought the point of noConflict was to revert to using jQuery() and not $ - the code that you post is not exactly doing that.
conversely - mootools, if loaded AFTER jquery and if of version 1.2.3 or higher, will NOT take over the $ declaration and fallback to document.id instead.
when do you get the exception, runtime or when you interact with a popover element? do console.log(window.$) and see what has declared it, it sounds like it's a primitive object property and not a function.
do you run any specific mootools stuff that requires use of $? need more data than what you have provided.
one thing you may want to look at is the MooTools port of BootStrap here: http://dev.clientcide.com/?version=MooTools%20Bootstrap - still a work in progress but it has the important stuff.

Categories