Comments (4)
Any luck with this? I am facing the same issue...
from ng-showdown.
Yes, I solved it, but my health is very poor right now and I can't get to a computer to post how I did it. I will make an active effort to do that tomorrow.
from ng-showdown.
Okay. The way you do this is to register the extensions with the ng-showdown provider, like this. Mine is in Typescript, but this code should work fine in javascript if you account for the class exports.
import 'angular';
import * as showdown from 'showdown';
export class markdownConfig {
constructor($showdownProvider: showdown.IShowdownProvider) {
/**
* configure an extension to translate text into
* alert boxes
*
* @format [!{css}] > {message}
*/
showdown.extension('notice', () => {
return {
type: 'lang',
regex: /^\[!(.*)\]\s+(>)\s+(.*)/gmi,
replace: (text: string, css: string, method: string, message: string) => {
return text.replace(/^\[!(.*)\]\s+(>)\s+(.*)/gmi,
`<div markdown class="notice notice-${css}" >$3</div>`);
}
};
});
/**
* configure links to static views on the same page
*/
showdown.extension('viewLink', () => {
return {
type: 'lang',
regex: /^(\@\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*()<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/gmi,
replace: (text: string, message: string, separator: string, url: string ) => {
return text.replace(/^(\@\[((?:\[[^\]]*]|[^\[\]])*)]\([ \t]*()<?(.*?(?:\(.*?\).*?)?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/gmi,
`<div class="lookup col-xs-4 col-sm-3 col-md-3 col-lg-3"><a href="$4">$2</a></div>`);
}
};
});
// load the extensions
$showdownProvider.loadExtension('notice');
$showdownProvider.loadExtension('viewLink');
}
}
Then all you need to do is make sure this code runs; It can be in the controller of your view - but I've actually strapped it into its own individual module that I just load into the main angular application.
from ng-showdown.
Neat! Thank you @ciel for sharing your code. I'm sure there are others who will benefit from this. Hope you feel better!
from ng-showdown.
Related Issues (19)
- Angular Support HOT 7
- Documentation HOT 1
- Tests are failing in Travis CI HOT 4
- Directive seems to be broken HOT 8
- Directive broken when using jQuery (instead of jqLite) HOT 4
- Addin setFlavor function HOT 1
- Browserify cannot find module 'showdown'
- Publish release 1.1.0 to NPM HOT 5
- [$injector:modulerr] when including ng-showdown as module dependency HOT 2
- How to compile an extension's result? HOT 6
- unable to add ng-showdown in Electron app HOT 6
- Angular 2 future? HOT 2
- Sanitize option not in docs HOT 3
- Live Preview with iframe
- Strikethrough does not work in code blocks HOT 1
- Some options not setting correctly HOT 1
- Add `angular-sanitize` as a bower dependecy HOT 1
- Populate dist/ files or point package.json main at src/ HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-showdown.