I'm getting the following error message in Chrome and firefox while trying to implement gorbachev's syntax highlighter.
The page at local host says:
SyntaxHighlighter
Can"t find brush for: php
It's all the more frustrating because i just got it working on a test page in the same folder, it still works. There is very little different between the two pages. Here's my code:
<??>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--JQUERY SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<!--PROCESSING SCRIPTS
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
-->
<!--syntax highlighter-->
<script type="text/javascript" src="shBrushPhp.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
SyntaxHighlighter.all();
});
</script>
</head>
<title>code</title>
<body>
<div id="content">
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<!--<script type="application/processing">
</script>
<canvas data-processing-sources="processing/lines.pde">
</canvas> -->
</div>
</body>
</html>
<??>
For me, the solution was making the brush style non-capital. So for me, I was adding a new brush to syntaxhighlighter (haskell), and I changed the markup:
<pre class="brush:Haskell">...</pre>
To
<pre class="brush:haskell">...</pre>
Alternatively, you could change the brush identifier:
Brush.aliases = ['Haskell'];
Hope this helps!
It cant find the js file for the php highlighter. Make sure you uploaded the right brush and have the correct path for the brush. I had a lot of trouble getting it work in an MVC 3 application. I ended up using the S3 hosted files that Alex has.
Trying calling the remoted files and see if it works. Also take the call SyntaxHighlighter.all() out of your jquery call. Mine is in its own set of script tags. See if that works.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
i just moved all the content from the page into the test page, renamed it and it works fine now. just one of those things i guess.
Related
I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.
This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.
I've followed the steps given at http://fancyapps.com/fancybox/.
This is the code I have in my head.php file:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
This is copied from the given website.
I'm using the exact samen folder-name "fancybox", so I think that can't be the problem.
In my code where I want to load an image, this is what I have:
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
After loading this page, I have this code (also copied from the given website):
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.
Thanks for your help in advance!
This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this.
Here is a test page using your code with the urls modified to match the folder layout shown in the image below. As you can see it does work. Therefore, your issue must be due to your urls being incorrect or the files themselves being missing.
This is the code from the test page:
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<?php
$row['bestandsnaam'] = 'images.jpg';
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
?>
</body>
</html>
Folder layout:
I downloaded the plugin and added it as a separate file in my html, I also added the css file in the head, but it is not working. my html is this:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click Sign Up!</title>
<link rel="stylesheet" href="signupstyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="messi.css" />
</head>
<body>
<a href="#" id="line_break" >Why is my name required?</a><br><br>
</body>
and my script is this:
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
they said I should call it like this:
$( "#line_break" ).click(function(){
messi.alert('This is an alert with Messi.');
I even added the $(document).ready(function(){}) and it still didn't work.
there website: http://marcosesperon.es/apps/messi/
my reason for using messi dialog box is because it has a better look than the jquery ui dialog box and can be customized to fit my liking. If this is a waste of time please tell me and recommend something else.
You're loading messi.js before you're loading jquery.
Since messi is a jQuery plugin, you need to load your scripts in the right order.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
I have WHMCS script but my main problem is Java script not working, I have tried many solutions but no luck. I'm sure about files path and their work I have tested it in another script, but no luck.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} -
{$kbarticle.title}{/if}</title>
<link rel="stylesheet" type="text/css" href="templates/{$template}/kk.css" media="screen" />
<!-- slider0000000000 -->
<!-- Le styles -->
<link href="templates/{$template}/1st/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.animations.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.min.css" rel="stylesheet" />
<link href="templates/{$template}/1st/flexslider/flexslider.css" rel="stylesheet" />
<link href="templates/{$template}/1st/assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- //slider00000000 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.lush.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script>
<!-- popup -->
<!-- /popup -->
<!-- slideshow -->
<script language="JavaScript" type="text/javascript"
src="templates/{$template}/scripts/jquery.cycle.all.2.74.js"></script>
<!-- slideshow/// -->
<!-- fade -->
<script type="text/javascript" src="templates/{$template}/scripts/55.js"></script>
<script type="text/javascript" src="templates/{$template}/scripts/66.js"></script>
<!-- /fade -->
</head>
<body>
Add {literal} before start of your js and {/literal} after js finish.
ex:
{literal}
$(document).ready(function(){
alert("here");
});
{/literal}
WHMCS use smarty templates you'll need to add {literal} before start of javascript and {/literal} at the end of javascript.
Which version are you using? based on the date of the submission I will say the latest or close to it, but I would have added to much code to the javascript link, I currently have mine setup as under the example as - <script src="templates/{$template}/js/jquery.easing.1.3.js"></script> which then registers and pulls the right location, so if your link is <script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script> and the 1st is the name of the template then WHMCS you need to remove that and test it again, you don't need the folder name after linking to it as it register the folder name and will display it properly. Hopefully this helps a little bit better for you.
Refer to WHMCS documentation on bracelet
Everything within the {literal} {/literal} tags will not be parsed (such as the template variables). However, you would be able to accomplish adding the template variables by using multiple literal statements.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I got the SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/
I cant get the autoloader to work. What am I doing wrong?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
I've made sure that my urls/script paths are correct.
This works, but I'd really like to get the autoloader working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shBrushJScript.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
To make "SyntaxHighlighter.autoloader" work, you should move the line under your "pre" sections or put it into document ready's callback.
The "autoloader" method checks current loaded "pre" sections and requests corresponding brushes. So if it's executed before the body element loaded, no brush will be loaded.
My answer deals with the latest version of SyntaxHighlighter at the time of writing, which is version 3.0.83.
I was also having this problem and then I tried the alternative syntax for the autoloader function and it worked for me even with relative paths. Please put the following code at the bottom of your page below all your <pre> tags:
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
Please note that the documentation about the alternative syntax on the SyntaxHighlighter website here is currently wrong. It suggests that you put in an array within an array and also that you must use full paths. Both are misleading statements because the following does not work and no error is thrown either:
SyntaxHighlighter.autoloader([ [ 'alias1', 'alias2', '/full/path/to/brush.js' ] ])
The truth is that to use the alternative syntax you just put in a series of arrays (no parent array is required!), like so and can have relative or absolute paths:
SyntaxHighlighter.autoloader([ 'alias1', 'alias2', 'path/to/brush.js' ], [ 'alias1', 'alias2', 'path/to/brush2.js' ]),
Additionally, I must note that I had a problem with using the unminified version of SyntaxHighlighter (the file under the src folder bundled with SyntaxHighlighter). It was asking for the XRegExp library which can be downloaded here: http://xregexp.com/. However, even after including this library (which for some reason does not need to be included in the minified version - very strange I know!) the code was still throwing errors. In summary, I used the minified version (available under the scripts directory) with no problems.
To finish off this answer, here is my fully working SyntaxHighlighter autoloader code:
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello SyntaxHighlighter</title>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
</head>
<body style="background: white; font-family: Helvetica">
<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
</html>
Try:
<script type="text/javascript">
window.onload = function ()
{
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
}
</script>
For people reading this in future, for some reason the shAutoloader.js script's path is locked in...
Meaning if you want it to auto load you're going to have to put it in this specific path:
js/syntaxhighlighter/shAutoloader.js along with the rest of the language scripts.
It's stupid but if anyone knows how to fix this, let me know :D
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
<script type="text/javascript">
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
</script>
</body>
</html>