I want to move this code in Plnkr to JSBin. It does not work, and DevTools shows Error: ui-codemirror needs CodeMirror to work... (o rly?).
It seems that Plnkr has some dependency management that JSBin does not have. I would like to know what Plnkr did behind the screen, and run this code in JSBin, does anyone know how to modify the links and sources to make it work?
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<title>UI.Codemirror : demo </title>
<!-- Le css -->
<link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
<link rel="stylesheet" type="text/css" href="http://codemirror.net/theme/twilight.css"/>
</head>
<body>
<!-- Le content... -->
<section>
<div ui-codemirror="{
lineNumbers: true,
theme:'twilight',
readOnly: 'nocursor',
lineWrapping : true,
mode: 'xml'
}" ><html style="color: green">
<!-- this is a comment -->
<head>
<title>HTML Example</title>
</head>
<body>
The indentation tries to be <em>somewhat &quot;do what
I mean&quot;</em>... but might not match your style.
</body>
</html></div>
</section>
<!-- Le vendor... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-codemirror/bower/ui-codemirror.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript:
var app = angular.module('x', ['ui.codemirror']);
If your page is loaded over HTTPS, the browser will usually refuse to also load active content assets (javascript,
.wofffonts) over HTTP. (This will show as an error in the browser's development console.)There are several forms of urls and they should be preferred in this order:
app.js)/app.js)//codemirror.net/lib/codemirror.js)https://codemirror.net/lib/codemirror.js)For third party assets on servers that support both HTTP and HTTPS, that gives us protocol-relative urls. This type of url uses whatever protocol (
HTTP:orHTTPS:) the page used. (A minor problem with this type of url is that they fail when loading the page directly from the file system as the browser attempts to load the third-party resource using theFILE:protocol. To solve this, development should always be done in conjunction with a web server, local or otherwise.)The servers of the third party assets you've included support both HTTP and HTTPS so using protocol-relative urls for those assets is preferred: