Markdown in AngularJS using marked.
Home Page: http://hypercubed.github.io/angular-marked/
I am trying to override the link generated by the markdown renderer to make them relative to the current page instead of the root page but my only option to do so now is to do it in the config section where i don't have access to the current location of the page.
IS there a way to configure the renderer in the controller? or any other solution to this problem ?
I am trying to use it with json data but it's not working. What method should I use here?
<div ng-repeat="row in user">
<h2><a href="{{row.user.html_url}}" >{{row.user.login}}</h2></a>
<marked>
{{row.body}}
</marked>
</div>
I'm using contentful which renders content similar to angularJS. Does this work If want to use it as a directive like below?
<marked>{{$contentfulEntry.fields.footerText}}</marked>
Note that the content is pulled from a contentful repository. It's not coming from a $scope variable. How can I achieve this? Thanks
i found an issue using angular-marked for generatin markdown to html, when use de directive, i wont work, i found a solution, adding this line.
$compile(element.contents())(scope); on the section of directive marked in function set... i hope this help some one, and hope can iclude this solution, review and test if is thebest... greetings !!!
I have seen no docs on how to render markdown dynamically. Is it possible ?
Hello,
i was just running test for my application and i discovered a cross site scripting flaw in your library. Here is a plunker which show it. You can see the script ist not printed out as plain text because it is executed. For one reason or the other the script is not executed but if you browse through the html code, you will be able to see the script tag. I will be very gradeful if you could fixed this.
Thanks.
<textarea ng-model="markdown_content" cols="60" rows="5"></textarea>
<div marked="markdown_content"></div>#require shim
'angular-marked':['angular','marked']
#angular config
markedProvider.setOptions
gfm: true
tables: true
highlight: (code)->
hljs.highlightAuto(code).value//angular-marked
var c = b.marked;//b.marked is undifineHi,
I'm sorry, I'm a beginner and I can't find the solution to my problem...
Everything works fine when I use angular-marked as a directive but I'm interested in loading markdown files with the command
<div marked src="/static/data/documentation/README.md"></div>
but I get : "Error: [$parse:syntax] Syntax Error: Token '/' not a primary expression at column 1 of the expression [/static/data/documentation/README.md]"
And if I remove the first '/' I get another error :
"WARNING: Tried to load angular more than once." and the associated web page is just a mess...
Thx a lot if you have any idea.
Thank you for this wrapper. One question, where would the user set align: 'left'?
markedProvider.setRenderer({ align: 'left' })I tried that, but the text is being centered.
I have a value attached to an ng-model. I would like this value to be run through marked. Something like this.
JS:
var text = "<script>alert('hello scriptio')</script>"
scope.text = marked(text)
HTML:
<textarea ng-model="text"></textarea>
Is this possible?
This would be great if this module could be published on NPM too. The angular & angular-ui teams a publishing on NPM so I think this makes sense.
I'm trying to move away from bower as much as possible and NPM appeals a lot to me.
Hi, I though that it would very useful if there is some sort of a list with all the supported syntax rules.
E.g.
# Heading 1
# Heading 2
# Heading 3
etc.
I'm sorry if that's already being asked or answered somewhere, but I couldn't find any information. Even if all of the rules are supported you might want to include it as a Note somewhere in the GitHub Page.
Thank you 👍
Is there a way to convert my html back into markdown? I'm not seeing anything, but it never hurts to ask.
Anchor doesn't work with 2 header in my document
<marked>`<test>`</marked>
will result in
``
instead of:
<test>
'marked' would parse correctly:
marked.parse('`<test>`') ==> "<p><code><test></code></p>"
if you debug into your link function, you can already see, that the wrong string is handed over to marked.
Hey there,
I don't know if I am missing something in front of my eyes or if angular-marked does not support this. But I have a page where depending on what button I click a different markdown file is loaded. There is a fairly large number of these which will change overtime, so writing it out manually is less than ideal. The way I would expect this to work is something like:
<div marked ng-src="/url/to/file/{{file_name}}.md"></div>
OR
<div marked src="'/url/to/file/{{file_name}}.md'"></div>
However both of these break the whole page.
Any help would be greatly appreciated!
set(scope.marked || element.text() || '');
=> change to
set(scope.marked || element.html() || '');
our highlight function within the markedProvider config looks like this:
markedProvider.setOptions({
gfm: true,
tables: true,
highlight: function(code) {
return hljs.highlightAuto(code).value;
}
});
but when we render this:
<h1>
Lorem Ipsum Times <small>Filler text for fulfilling people</small>
</h1>it seems to add a <span class="hljs-comment"> right before the string "rem" in "Lorem"
I've setup things this way:
angular
.module('i18n.hymns')
.controller('HymnController', HymnController);
HymnController.$inject = ['$stateParams', 'hymnsService', '$ionicActionSheet', '$cordovaSocialSharing', '$cordovaToast', '$scope', 'hc.marked'];
And I'm getting this:
"Error: [$injector:unpr] Unknown provider: hc.markedProvider <- hc.marked <- HymnController"
Opening the demo in Chrome 44.0.2403.125 (64-bit) gives me the following error in the console.
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
at angular.js:68
at assertArg (angular.js:1770)
at assertArgFn (angular.js:1780)
at angular.js:8975
at setupControllers (angular.js:8037)
at nodeLinkFn (angular.js:8077)
at compositeLinkFn (angular.js:7541)
at compositeLinkFn (angular.js:7545)
at publicLinkFn (angular.js:7416)
at angular.js:1635
Currently I have something like this
.config(function($routeProvider) {
$routeProvider.when('/get-started', {
'templateUrl' : 'get-started.html',
'controller' : 'GetStartedCtrl',
'controllerAs' : 'vm'
})with get-started.html containing only <marked src='get-started.md'></marked>
It would be great to hook angular internals to automatically parse md files.
.config(function($routeProvider) {
$routeProvider.when('/get-started', {
'templateUrl' : 'get-started.md',
'controller' : 'GetStartedCtrl',
'controllerAs' : 'vm'
})I'm not sure it's feasible, and if it can support every router with a single codebase (ngRoute, UI Router, new router ...)
Not sure what to do. I have html code samples in my markdown file within html <code> type structure. When the markdown is rendered the html tags are stripped out of the examples. Any ideas? Thanks.
Hey, just wondering if there's a way that I can write html code in the resource .md file and have it still render properly on the page. Love your work by the way. I am thinking of adding some code pen embeds. But I am writing all the content in .md right now.
I updated a local fork to $compile after setting the html. I didn't do a PR because it caused all the tests to fail for some reason.
I have a copy to clipboard feature in which I have a fragment in the form of:
my **styled up** fragment
but I need to get rid of the markdown markup so as to end with:
my styled up fragment
so that I can feed that to a copy to clipboard function, is this possible?
Hi, thanks for your work. I know this is called angular-marked, but this seems to be the only actively maintained angular markdown component. Would be nice to have a choice for commonmark.
I am trying to set some options using the code suggested:
app.config(function (marked) {
marked.setOptions({
gfm: true,
breaks: true
});
});
Unfortunately angular does not dig this. The code is running fine without the config.
the directive always starts at 1 [..] N numbering and does not consider situations where numbering must having an initial value other than "1".
you need to configure the service for highlighting code blocks and code spans with highlight js (do not forget to include its *.js file in index.html)
marked.setOptions({
gfm: true,
tables: true,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
I know that in the marked library, you can forcefully code in custom rules by modifying the source - is it possible to do this a bit cleaner in angular-marked? Is there a way to add rules to the lexer at configuration?
I'm wanting to add a rule to turn...
[!alert::warning] > blockquote text
into...
<blockquote class="alert alert-warning">Some text goes here as a warning.</blockquote>
But am having a hard time figuring out where I can add this in without having to muck around and change the internal plumbing of both marked and angular-marked.
Hi,
Thanks for this directive, works well. One of the problem i experienced with your setup is the compatibility with RequireJS.
Cuz marked is compatible with AMD standard, when it detect define exists, it will not expost marked into window any more. So the directive will fail to get window.marked.
My work around is manually expose marked into window in the RequireJS bootstrap script.
require(['marked'], function(marked) {
this.marked = marked;
});Tho it works well, it's still better to support RequireJS out of the box. Sorry I cannot provide a patch, cuz I'm not sure what's the ideal way of doing this. I will if I find a good solution.
Thanks again for this good lib,
Greg
I have a controller that basically assigns text to a $scope variable like this;
$scope['Model'] = ["markdown text 1", "markdown text 2"];
And then I try to use marked on it within a view, like this;
<div ng-repeat="n in Model">
<div marked="n"></div>
</div>
or
<div marked>
<div ng-repeat="n in Model">
{{n}}
</div>
</div>
I just get {{n}} as the output, verbatim. Marked never runs, never does anything to it. I'm completely baffled. I know the text is fine.
I have tried all of the examples and nothing seems to work. It does work if I put in static, hard-coded text between <marked> directives - but nothing dynamic.
The only way I've been able to make anything work is to forcefully use the marked(n) function within the controller - which is far less than ideal and certainly not what I'm wanting to do.
Hi @Hypercubed nice to find to this module.
I'm doing the same thing as you possible and just find your module. gfm is really helpful for me but I may want more than that, do you know any plugin that I can use to parse github username?
I know showdown has some notion of plugin to do this, but not sure about marked.
Do you have any idea about it? Thanks. :D
i have an issue when using anchor with directive du-smooth-scroll like this on the mark down
i fix it adding $compile on the directive in this line
.directive('marked', ['marked', '$templateRequest','$compile', function (marked, $templateRequest,$compile) {
and on the element
$compile(element.contents())(scope);
hope this change merge on future version. Greetings
The latest released version is v0.0.16, but it is missing on NPM. Could you please publish this version on NPM also?
I've installed dependencies via bower
bower install marked
bower install angular-marked
bower install highlightjs
bower install angular-highlightjs
output of $ bower list:
├─┬ angular-highlightjs#0.6.1
│ └── angular#1.5.5 (1.5.6-build.4831+sha.4a5723f available)
├─┬ angular-marked#1.2.0
│ ├── angular#1.5.5 (1.5.6-build.4831+sha.4a5723f available)
│ └── marked#0.3.5
├── marked#0.3.5
├── highlightjs#9.3.0 (latest is 9.4.0)
included the script tags
"bower_components/highlightjs/highlight.pack.min.js"
"bower_components/angular-highlightjs/angular-highlightjs.min.js"
"bower_components/marked/lib/marked.js"
"bower_components/angular-marked/dist/angular-marked.min.js"My app looks like this:
var app = angular.module('app', ['hljs', 'hc.marked'])
.controller('my_controller', ['$scope', 'code', 'marked', function($scope, raw_text, marked) {
$scope.text = marked('```' + 'python' + '\n' + code + '\n' + '```');
}]);
app.config(['markedProvider', function (markedProvider) {
markedProvider.setOptions({
gfm: true,
tables: true,
highlight: function (code, lang) {
if (lang) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
}
});
}]);<div ng-controller="my_controller"
<div marked="text"></div>
</div>However, I keep getting the hljs tags in the final html:
<span class="hljs-keyword">Hello again, I want to create an online markdown editor while using your lib.
With data binding, it parser markdown code normally but then it shows up HTML source code directly.
I don't understand what's wrong, can you have a look my code and help? Thank you.
<div class="container-fluid main-div" ng-controller="mainCtrl">
<div class="row">
<div class="col-sm-6">
<h4 class="text-center">Write your markdown code:</h4>
<div class="well well-input">
<textarea ng-model="markdownSource"></textarea>
</div>
</div>
<div class="col-sm-6">
<h4 class="text-center">Then your content will show up here:</h4>
<div class="well">
{{ markdownDisplay }}
</div>
</div>
</div>
</div>var ngMarkdownEditor = angular.module("ngMarkdownEditor", ['hc.marked'])
.config(['markedProvider', function(markedProvider) {
// configuration for angular-marked
markedProvider.setOptions({
gfm: true,
tables: true,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
markedProvider.setRenderer({
link: function(href, title, text) {
return "<a href='" + href + "' title='" + title + "' target='_blank'>" + text + "</a>";
}
});
}]);
ngMarkdownEditor.controller('mainCtrl', ['$scope', 'marked', function($scope, marked) {
$scope.markdownSource = "";
$scope.$watch('markdownSource', function() {
$scope.markdownDisplay = marked($scope.markdownSource);
});
}]);First of angular-marked is a very handy directive. Thanks for that.
I am using the following in the code.
<div marked src="vm.document"> </div>
I want to display a custom error partial if the vm.document is missing from the document file store. Do you have a suggestion or do you think marked directive needs a change? I would prefer something like the below.
<div marked src="vm.document" errSrc="vm.errorTemplate"> </div>
If you agree i can contribute as well.
I was playing around with the editor here: http://hypercubed.github.io/angular-marked/#/api and I could not seem to get a list to render. I was trying this:
*Milimeteres
*Centimeters
*pixels
1.Ems
2.Points
any idea as to why it would not work?
For instance, I want to make all images appear smaller in the rendered markdown, and on click, show the image version in a lightbox. Is that possible? The markdown content has <img ...> tags that I can parse and render in the controller using the marked service, but my attempts to add ng-click events have been less than fruitful.
I got an issue when I updated marked.js to version 0.3.5 with bower, and then angular-marked.js#0.0.21 doesn't work any more. But when I checked in console, there wasn't any error. Now I rolled back to marked.js#0.3.3, then angular-marked.js#0.0.21 works again. I haven't got a clue if there was a conflict between these two libraries or not.
My usage of angular-marked.js:
$scope.$watch('markdownSource', function() {
$scope.markdownDisplay = marked($scope.markdownSource);
});<textarea class="text-div" ng-show="showEditor" ng-model="markdownSource" placeholder="Let's write something here..."></textarea>
<div class="markdown-div" ng-show="showViewer" marked="markdownSource"></div>I came across an issue with code blocks that are indented by tabs in the markdown file - they are not formatted as code blocks (they are considered normal text). I think this comes from your unindent() function that replaces all tabs with spaces. Any particular reason for this replace?
The markdown standard explicitely allows tab indented code blocks.
For now I've fixed it by replacing tabs in advance with four spaces, but I wanted to mention it because it could be useful for others too.
Thanks in advance
I am currently on Chrome testing a hybrid mobile application using Ionic. When using the plugin, I'm finding trouble to show italics and headers. Italics are simply ignored, whilst headers are simply shown with the # before it. What could be the issue please? Thanks!
I wrote a markdown text with this.
{{exception | filter:arg[:arg1:arg2...:argN]}}
But angularjs will listen it and give me an error like this.
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%3A&p1=not%20a%20primary%20expression&p2=24&p3=exception%20%7CNaNilter%3Aarg%5B%3Aarg1%3Aarg2...%3AargN%5D&p4=%3Aarg1%3Aarg2...%3AargN%5D
How to show {{}} code safely in angular-marked?
As you can see in screenshot, scope.marked can be a number.
That happened by mistake in our code base but I am expecting angular-marked gracefully convert the value to string and then use it.
This will throw because angular-marked is assuming scope.marked is string across the codebase.
Help! I can't make it works.
Firstly, I've install the library like this:
var ajBlogApp = angular.module("ajBlogApp", ['ngRoute', 'ngResource', 'ngAnimate', 'hc.marked']);
ajBlogApp.config(['$routeProvider', 'markedProvider', function($routeProvider, markedProvider) {
// configuration for Angular Marked
markedProvider.setOptions({gfm: true});
// configuration for Routing
$routeProvider
.when('/', {
templateUrl: 'pages/list-view.html',
controller: 'listViewCtrl'
})
.when('/aboutme', {
templateUrl: 'pages/about-me.html',
controller: 'aboutMeCtrl'
})
.when('/404', {
templateUrl: 'pages/404.html',
controller: '404Ctrl'
})
.otherwise({redirectTo:'/404'});
}]);Then in the about-me.html I use it like this:
<div class="row">
<div class="col-xs-12 col-md-11">
<div path-link></div>
<div class="main-content">
<marked>
#Markdown directive
*It works!*
</marked>
</div>
</div>
</div>But no matter how I try, I get always this error in console:
ReferenceError: marked is not defined
at angular-marked.js:173
at self.$get (angular-marked.js:176)
at Object.e [as invoke] (angular.js:4450)
at angular.js:4268
at d (angular.js:4409)
at Object.e [as invoke] (angular.js:4441)
at angular.js:6941
at m (angular.js:336)
at Object.<anonymous> (angular.js:6939)
at Object.e [as invoke] (angular.js:4450)
Have I done something wrong?
skladfjlasdkfj
asdlfjlasdfj
| aslkdjflsadkf | laksdjflka |
|---|
Output:
skladfjlasdkfj
asdlfjlasdfj
|aslkdjflsadkf|laksdjflka| |--------|---------| |dslkfjasldfkj|salkdfjlasdkfj|
Hello,
I'm using your provider with an angular application that doesn't use bower to manage its dependencies.
I installed the file with bower install Hypercubed/angular-marked and copied the files to app/vendor and then followed your instructions.
I'm not sure that I managed to load hc.marked properly because when I run my app I get the dreaded error:
Unknown provider: markedProvider
Here are the important bits of my application:
app/vendorDo I need to explicitly load the hc.marked module?
I am not sure if i am doing something wrong but I cannot get {#this-is-an-id} does not work, it just displays the the text to create an ID
Right now it does not work anymore to include the lib/angular-marked.js file published in NPM in the browser.
I'm using NPM to manage front dependencies but I would like to have build version in the package.
Is it possible for you to fix this?
Thanks a lot!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.