I want to be able to print a code snippet with script-tags using JavaScript.
This is more or less what I want to print:
<script src='URL type='text/javascript'></script><script>functionName();</script>
I tried:
jQuery('selector').text("<pre><script src='URL type='text/javascript'></script><script>functionName();</script></pre>");
Use some syntax higlighter for that (ex https://highlightjs.org/).
<html>
<head>
<title>test</title>
<!-- load highlight.js css & js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js" type="text/javascript"></script>
</head>
<body>
<!-- set up your tag which want to highlight -->
<pre><code class="xml">
<script src='URL type='text/javascript'></script><script>functionName();</script>
</code></pre>
<script>
// initialize highlight
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
Okay, this is going to sound very imbecilic. (which it probably is)
I'm a very novice programmer, so please bear with me.
I'm trying to link a simple jQuery file to my HTML file, but I can't seem to make it work. After looking through the previous answers to this trivial question, I realized that i was missing pivotal lines of code such as (and this is just an example)
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
Again, I know I must sound very stupid.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
My jQuery code is as follows:
$(document).ready(function() {
$('#green').fadeOut(1000);
});
Can someone please tell me how to link the jQuery file to the HTML file? I know this question has been asked 500 times, but for some reason I am unable to make this work. Thank you very much! Sorry for making you cringe with my ineptness.
First of all its is mandatory to include jQuery library.
There are few ways you can link your jQuery code in html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
This is how you can integrate your codes:
Method 1 (In Footer)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</body>
</html>
Method 2 (In Header)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Method 3 (From External File) Lets say you have a file custom.js that has you codes :
$(document).ready(function() {
$('#green').fadeOut(1000);
});
This is how you can add external js file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Update: Path Example
- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html
url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js
Just add your initial jquery load to the header beneath the stylesheets. You want to load any css before you load your jquery scripts (in the future).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#green {width: 150px; height: 150px; background: green; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});
});//]]>
</script>
</head>
<body>
<div id="green"></div>
</body>
Do note that you load jquery before you use any part of the script calls ($).
Hope that helps!
Here's your fiddle:
http://jsfiddle.net/2633c1em/
Put your script tag in header section like
<head>
<script type="text/javascript" src="your jquery file name "></script>
</head>
file name like load.js
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'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.
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>