I use https://highlightjs.org/ for an in browser (and in a static site generator) to highlight code snippets for blogs and sites. I'm almost certain its not handling ES6, ES7, JSX, and Flow.
How can I get better highlighting for these new additions to javascript?
Please advise. Thanks :)
Using highlight.js you can register languages.
<script src="/js/highlight.js" type="text/javascript"></script>
<script src="/js/highlight-js.js" type="text/javascript"></script>
<script src="/js/highlight-xml.js" type="text/javascript"></script>
<script>
hljs.registerLanguage('js', H_js);
hljs.registerLanguage('xml', H_xml);
hljs.initHighlightingOnLoad();
</script>
Here is a good hightlight-js.js for ES6/React.
Related
On my site jh_magnificpopup is no longer working. jQuery seems to be there but still it is not happy... Why is this?
http://www.wannermech.ch/schlosserei/diverse-gebrauchsgegenstaende.html
you have two different versions of jquery in your site:
in the beginning (line 29):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
and in the end: (line 94):
<script src="typo3temp/assets/compressed/merged-c586b8f41a42376a91eae317eb6f66f9-5c96191b865a8f66f661743685d8e702.js?1540748008" type="text/javascript"></script>
which includes jQuery v2.2.3.
In such a case even the noConflict option
<script type="text/javascript">
/*<![CDATA[*/
jQuery.noConflict();
/*]]>*/
</script>
might induce more confusion
Hi I have the following Plunker for Ionic 2.
Ionic 2 Environment
I would like to add the Angular 2 Flex Layout(link below) to this plunker so that I have access to it on the home.html. How would I go about this?
Angular Flex Layout
Many thanks in advance.
My index looks like:
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular#2.0.0-beta.6/bundles/ionic.ios.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
This specific plunker is actually pretty out of date for both angular and ionic. Unfortunately there doesn't seem to be one since 2.0 went stable let alone the 4.0 current branch.
You may get it to work with that somehow but I don't think it would be a good testing/example tool.
Update: I went ahead and got one working with blank settings. You can see it here: http://plnkr.co/edit/y8R0MF?p=info
And Here it is with Flex-Layout running
To add plugins you have to add them to the systemJs config with the path to the umd like:
'#angular/compiler': 'npm:#angular/compiler#4.1.2/bundles/compiler.umd.js',
which is a path to the unpacked version
Hope that helps!
When I setup a very simple project with jspm using system.js and babel, it seems that the error messages are not correctly displayed.
I did the following :
npm init; press enter a bunch of times
jspm init; press enter a bunch of times
And added two files :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="jspm_packages/system.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script type="text/javascript">
console.log('test 1');
System.import('main');
</script>
</head>
<body>
</body>
</html>
main.js
console.log('test2);
// ^ I voluntarily forgot the ' to show the error;
According to this talk, and previous experiences with babel, I should see some very nice syntax error messages, like this one :
But instead, I got this, which is completely cryptic, and doesn't help me a bit :
Because of the error line saying system.js:1:0, I believe the error happens in system.js, and it fails before calling babel.
Moreover, I noticed es6-module-loader isn't loaded. I thought it was used in system.js.
I don't see what I am missing here.
Hy There...!
I have some problems when its come to Jquery ..............
Here i am trying to use TinyMCE Text Editor... I had download its Js File and some code with it mention it in there site...
But When i see my index.HTML it is all Blank.....
Which i don't understand Please Any Help or hint will be appreciated........
Thanks in Advance ... Here Is The Code
<html>
<head>
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="index.html">
<textarea name="content" style="width:100%" class="mceEditor"></textarea>
</form>
</body>
</html>
I believe you are not linking the tinymce.js file correctly. Make sure it's linked correctly relative to the directory of index.html file.
I used the same markup you provided and made it work in jsFiddle using the script from TinyMCE CDN.
http://jsfiddle.net/AHXXT/
Is there any way to use CoffeeScript in client side?
There are two ways:
Compile the CoffeeScript to JavaScript and deploy it as you would any JavaScript file, or
Use coffee-script.js, which allows you to put <script type="text/coffeescript> tags in your page.
The latter isn't recommended for production use, but it's nice for development. Or for usage in online editors like these:
<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>
<script type="text/coffeescript">
console.log 'Hello World!'
</script>
See the related question: Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?
See also Webmake plugin for CoffeeScript -> https://github.com/medikoo/webmake-coffee
It allows you to organize coffee modules in Node.js style and bundle it for browser. It provides source maps support, so you can debug CoffeeScript files as they are, directly in a browser.
To not compile everytime you can use -w param and coffee will compile the file everytime file change
coffee -wco src/ public/js
Yes, it can be done by adding a CoffeeScript src tag to the head section of your html page.
Download the CoffeeScript source from this path: http://coffeescript.org/extras/coffee-script.js
Copy and paste the below code and try to run in a browser:
<html>
<head>
<script type="text/javascript">
function printHelloJava(){
alert("Hello Javascript");
}
</script>
<script src="coffee-script.js"></script>
<script type="text/coffeescript">
#printHello = ->
alert "Hello Coffee Script"
</script>
</head>
<body>
<h1>Coffee Script on client side</h1>
<input type="button" onclick="printHelloJava();" value="Hello Java">
<br>
<input type="button" onclick="printHello()" value="Hello Coffee">
</body>
</html>
You can also use CDN coffeescript for better and faster performance.
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
or
<script src="https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js"></script>
Then use type="text/coffeescript" for compile Coffee Script.
<script type="text/coffeescript">
// add code here
</script>