Prettify needs class="prettyprint" to be add to <pre> or <code>. How to let WMD do this?
Take a look at the PageDown Markdown editor...
AFAIK, WMD is dead, but PageDown is a fork based on the WMD source.
It's an active project based on the work done in WMD. That takes care of the Markdown editor. To get syntax highlighting working you'll also need to download source from the Google-Code-Prettify project.
Combine the demo.html, demo.css, prettify.js, prettify.css into the same folder.
Modify the imports accordingly:
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="prettify.css" />
<script src="../Markdown.Converter.js"></script>
<script src="../Markdown.Sanitizer.js"></script>
<script src="../Markdown.Editor.js"></script>
<script src="prettify.js"></script>
Note: This assumes that the PageDown source files are in the parent directory.
To enable syntax highlighting, you'll need to do two things:
Add the 'prettyprint' class to all 'code' elements generated by the editor.
Fire the prettyPrint() event after a change is made.
If you take a look at the code, I modified the non-sanitized converter to do both:
var converter2 = new Markdown.Converter();
converter2.hooks.chain("postConversion", function (text) {
return text.replace(/<pre>/gi, "<pre class=prettyprint>");
});
var editor2 = new Markdown.Editor(converter2, "-second");
editor2.hooks.chain("onPreviewRefresh", function () {
prettyPrint();
});
editor2.run();
To give you an idea of the flexibility. Google-Code-Prettify is the same library that enables syntax highlighting on code.google.com and stackoverflow.com.
It took me a little while to figure out how to get it to work but it's amazing how easy it is to implement. This is only a demo example but it shouldn't be too hard to extend it further.
With the help of jquery and using the timer plugin this can be done in the following way.
<html>
<head>
<title>My Page Title</title>
<link rel="stylesheet" type="text/css" href="wmd/wmd.css" />
<script type="text/javascript" src="wmd/showdown.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>
<link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wmd-input').keydown(function() {
$(this).stopTime();
$(this).oneTime(1000, function() { styleCode(); });
});
});
function styleCode(){
$("#wmd-preview pre").addClass("prettyprint");
$("#wmd-preview code").html(prettyPrintOne($("#wmd-preview code").html()));
}
</script>
</head>
<body onload="prettyPrint()">
<div style="width:400px;min-height: 500px;">
<div id="wmd-button-bar" class="wmd-panel"></div>
<br/>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<br/>
<div id="wmd-preview" class="wmd-panel"></div>
<br/>
<div id="wmd-output" class="wmd-panel"></div>
</div>
<script type="text/javascript" src="lib/wmd/wmd.js"></script>
</body>
The mechanism of the above is described here
Hope it helps.
You may be interested in the Stack Overflow version of WMD on Github. This version may have the feature you're looking for in it (but I'm not certain).
Related
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
I'm starting to use Angular Material and a problem occur: I have this simple page, built with Angular Material, with a NavBar but it doesn't appear, and I don't know why.
This is my page:
<html lang="it">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="MyApp" ng-cloak>
<!-- NavBar -->
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<span>{{currentNavItem}}</span>
</md-content>
</div>
<!-- End NavBar -->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
angular.module('MyApp', ['ngMaterial']);
</script>
</body>
The result is a blank page.
Thanks for help!
There are many things you did wrong in this code. First use ng-app at only in body tag. You also tried to use it in div element so remove that.
You defined MyApp two times in your javascript so remove the last definition.
Remove material.svgAssetsCache import since it is not avaliable. and try to use the below code for in your angular javascript file.
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.currentNavItem = 'page1';
});
I have developed single page application using Angular 2, node , express. It is running fine on chrome and firefox. but same is now working on IE 11. Used following code
Giving error to System in script tag. SCRIPT5009: 'System' is undefined
<html class="ng-scope">
<head>
<base href="/"/>
<title>Test application</title>
<!-- 1. Load libraries -->
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.dev.js"></script>
<script src="libs/angular2/bundles/router.dev.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bootstrap')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- End wrapper-->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
</body>
</html>
thanks in advance.
Finally I got the solution using following link.
I have added two javascript reference es6-shim.min.js and shims_for_IE.js
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/systemjs/dist/system-polyfills.js"></script>
<script src="libs/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
https://github.com/angular/angular/issues/7144
Note : In this reference libs = node_modules
Try adding
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>
as first script library
hi I am trying to get an instagram feed onto my website showing my user photos. I have put the javascript at the top of my page as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tomsaxby.com</title>
<!-- CSS ------------------------------------------------------------------------------------------- -->
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- EDITS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/neuzeit/MyFontsWebfontsKit.css" type="text/css" />
<!-- CSS ------------------------------------------------------------------------------------------- -->
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 904401907,
accessToken: '904401907.1677ed0.27d4a579f194430cbe77c28af165aae1'
});
userFeed.run();
</script>
</head>
I have then put a div with he id of "instafeed" into the body of my page. but nothing displays either locally or when i upload my files? Does anyone know why this is?
The most likely cause of your problem, is that instafeed.js is trying to run before your page has been completely loaded.
To resolve this, make sure you have put <div id="instafeed"></div> on your page, and that you are loading instafeed.js after the page has been completely loaded:
$(document).ready(function() {
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: clientId
});
feed.run();
});
One other thing...something the instafeed page does NOT seem to mention...is to add a "limit"...this tells instagram how many images to drop in.. otherwise i suppose the default is zero...
I made mine: limit: '4'
would be a pretty helpful piece of info to put into the instructions!
see below:
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'cool',
clientId: '916c01b8624d43c7b4b76369aruc86a0',
limit: '4'
});
feed.run(); </script>
Your instafeed.js file is not properly being called up.
You have put this:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
The path/to/ before the instafeed.min.js needs to actually be a working path with your website info.
So, I am trying to do a basic Google Chrome Hello World kind of extension. Can someone explain me why the below code doesn't work? Thanks.
popup.js:
document.getElementById("foobar").innerHTML = "Hello Chrome Extensions";
popup.html:
<!doctype html>
<html>
<head>
<title>Hello Chrome</title>
<script src="popup.js"></script>
<div id="foobar"></div>
</head>
<body>
</body>
</html>
I am following the "framework" of http://developer.chrome.com/extensions/getstarted.html.
It can be solved in two ways:
Swap the order of <script .. > and <div ..>.
Wrap the code in popup.js in a domready event:
document.addEventListener('DOMContentLoaded', function() {
// Code here...
});
Your code failed because the <div> was unknown at the time of executing the script.