showdown
A Markdown to HTML converter written in Javascript
Showdown Live Editor
I'm working on a project with Meteor, and I want it to use markdown, and it was very nice to see that there is a package to do that with.
So I meteor added showdown, it worked, and now I can do something like
{{#markdown}}
#This is a header
this is a paragraph
{{/markdown}}
and it works just fine. But now I want to actually put something more interesting in there. First thought was to sync it up with a textarea. I tried three things. First, I tried this:
$('.preview').html('{{#markdown}}'+$('#text').val()+'{{/markdown}}');
Where .preview is a div that I want to html to show up in, and #text is the textarea where someone is typing. This doesn't work though, it just shows the {{#markdown}} and stuff.
Next, I tried to just set up the div like this:
<div class="preview">
{{#markdown}}
{{/markdown}}
</div>
And add to it with:
$('.preview').html('#Is this an H1?');
or
$('.preview').append('*is this italics?*');
But again, it just showed the text, not the html.
Finally, I tried hard coding stuff into the markdown section, but that just clearly didn't work. Things like
<div class="preview">
{{#markdown}}
<div class="previewInner">
</div>
{{/markdown}}
</div>
or
<div class="span6 preview">
{{#markdown}}
{{>innerPreview}}
{{/markdown}}
</div>
So basically, I've tried everything I can think of and none of it does what I want. I tried I few more things, but I think you get the idea. How am I supposed to use this?
It's easy: just put your markdown inside {{#markdown}} ... {{/markdown}} tags.
Source: (StackOverflow)
This Markdown code:
*foo*
will produce this HTML code:
<p><em>foo</em></p>
Live demo: http://jsfiddle.net/9AjNb/
However, I'm already injecting the generated HTML code into an inline context, like so:
<p> text [inject generated HTML here] text </p>
so I don't want the <p> element to wrap around the generated HTML code. I just want the * delimiters to be converted to an <em>, element, and so on.
Is there a way to tell the Markdown converter to not produce the <p> wrapper? Currently, I'm doing a .slice(3,-4) on the generated HTML string, which does remove the <p>, and </p> tags, but this is obviously not a solution I'd like to keep for the long-term.
Note: I'm using the Showdown JavaScript implementation of Markdown, but I've also experienced the same issue with the Pagedown implementation.
Source: (StackOverflow)
I'm trying to use WebPack to include "showdown". The problem is that showdown will require("fs") and check the return value. This makes WebPack throw an error.
It seems like it should be possible to configure Webpack to generate a shim so that call to require("fs") will return false.
Maybe one of these techniques might work: http://webpack.github.io/docs/shimming-modules.html
Here's the Showdown.js code. If I comment out this code inside the node modules directory, the problem is solved. However, there should be a better way.
//
// Automatic Extension Loading (node only):
//
if (typeof module !== 'undefind' && typeof exports !== 'undefined' && typeof require !== 'undefind') {
var fs = require('fs');
if (fs) {
// Search extensions folder
var extensions = fs.readdirSync((__dirname || '.')+'/extensions').filter(function(file){
return ~file.indexOf('.js');
}).map(function(file){
return file.replace(/\.js$/, '');
});
// Load extensions into Showdown namespace
Showdown.forEach(extensions, function(ext){
var name = stdExtName(ext);
Showdown.extensions[name] = require('./extensions/' + ext);
});
}
}
Source: (StackOverflow)
I use angular-translate and showdown.js in my app (showdown is a port of markdown). I would like to run the output of a translated string through markdown. Do you have any suggestions of how to achieve that?
Let's say I have the string
This is a [link](www.google.com).
Running it through markdown would give
This is a link.
My goal is to have strings like this in my translation files, and run the translated text though markdown. I use a angular-markdown directive which is used like this:
<markdown>This is a [link](www.google.com).</markdown>
But combining markdown and angular-translate like this
<p><markdown>{{ 'MARKDOWNTEST' | translate }}</markdown></p>
outputs
<p>{{ 'MARKDOWNTEST' | translate }}</p>
Source: (StackOverflow)
I am using markdown-js to convert Markdown to HTML however it is not giving expected output.
HTML:
<p class="markdown">
# Highlight.js
---
Some more text here...
</p>
JavaScript:
$('.markdown').each(function(){
var html = markdown.toHTML($(this).html());
console.log(html);
$(this).html(html);
});
Output:
<pre><code>
# Highlight.js
---
Some more text here...
</code></pre>
So it simply surrounded provided Markdown text with <pre><code> instead of output like below:
<h1>Highlight.js</h1>
<hr>
<p>Some more text here...</p>
In fact I also tried other libraries such as showdown, pagedown, etc but output was always:
<pre><code>
# Highlight.js
---
Some more text here...
</code></pre>
Can anyone have an idea of what I am missing here ? Thanks
Source: (StackOverflow)
Using the following code, I get working output:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter();
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Returning <p><em>test</em> abc</p>
I would now like to add an extension. The github page suggests this can be done with:
<script src="src/extensions/twitter.js" />
var converter = new Showdown.converter({ extensions: 'twitter' });
However, modifying my code to:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
<script type="text/javascript" src="/js/twitter.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter({ extensions: 'twitter' });
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Produces the error
"Uncaught Extension 'undefined' could not be loaded. It was either not found or is not a valid extension."
Adding the following code (as listed under the Filter example)
var demo = function(converter) {
return [
// Replace escaped @ symbols
{ type: 'lang', function(text) {
return text.replace(/\\@/g, '@');
}}
];
}
Produces an error Uncaught SyntaxError: Unexpected token (
I would like to create an extension like this one https://github.com/rennat/python-markdown-oembed to interpret a , but it's unclear how to begin adding this support.
Source: (StackOverflow)
I am trying to write a markdown editor in AngularJS. I am using angular-markdown (AngularJS Showdown wrapper) for parsing the markdown and I would like to highlight code chunks using highlightjs. I have written the following Showdown extension:
/* global
hljs,
Showdown
*/
(function() {
'use strict';
Showdown.extensions.hljs = function(converter) {
return [
{
type: 'lang',
filter: function(text) {
return text;
var m = /([`]{3}[\S\s]*[`]{3})/gm.exec(text);
if(!m) {
return text;
}
for(var i in m) {
if(isNaN(i)) {
continue
}
var match = m[i];
var lang = match.replace(
/([`]{3})([\s\S]*)(\n){1}([\s\S]*)([`]{3})/gm,
'$2');
var code = match.replace(
/([`]{3})([\S\n]*)(\n){1}([\s\S]*)([`]{3})/gm,
'$4');
var hl;
try {
var hl = hljs.highlight(lang, code);
} catch(e) {
var hl = hljs.highlightAuto(code);
}
text = text.replace(match, '<pre>' + hl.value + '</pre>');
}
return text;
}
}
];
};
}());
This doesn't work perfect yet though. The text which comes after the first code snippet is nested and highlighted as well.
I have created a plunkr here. The relevant code is in js/angular-markdown-hljs.js.
My question is: How can I make it work?
Source: (StackOverflow)
I love Markdown. The concept is one of the most elegant and useful I've come across in my few years as a programmer. So I was excited to see Meteor implement a Showdown package and let me use it with the {{#markdown}} block helper.
However, when I started using it, my least favorite gotcha of markdown suddenly appeared: Indented Code Blocks.
Writing this:
<template name="home">
{{#markdown}}
Hello!!! Welcome to *My Site*!!
{{/markdown}}
</template>
Results in this:
My Hello!!! Welcome to *My Site*!!
Formatted as CODE!!!!
I hate indented code blocks. They completely screw with attempts to actually use Markdown in a programming environment. Code is wildly indented, and for good reasons. It keeps things organized and makes behavior clear. So the fact that Markdown specifications have for years missed this is flabbergasting to me. Github's fenced code blocks are an infinitely more intelligent way to do this, since it doesn't require repetitive punching of the tab or space key, making it easier to edit, and it's clearer what's happening in the text.
Anyway, </rant>.
I want to customize the markdown being used by meteor. How?? I've looked through Atmosphere and searched markdown, and found nothing applicable. Also, I'm not sure how to use a Showdown extension in the meteor environment.
Any solutions welcome!! All I really want is a markdown implementation that doesn't have indented code blocks. They're stupid.
Source: (StackOverflow)
I want to create a side-by-side markdown & preview, where the dynamically entered content is rendered as you type.
I have a custom directive for a markdown element, which works on static text, transforming what is in the DOM (raw makdown) into nice HTML (formatted markdown).
Data-binding a textarea to the markdown element will display text as you type, but the directive doesn't work. Raw markdown renders as raw markdown.
I am using showdown.js as the markdown parser. I get the feeling I am missing something simple, but I just can't see it, and it's bugging me.
<div ng-app="myApp" class="container-fluid">
<div class="span6">
<textarea ng-model="text"> </textarea>
</div>
<div class="span5 border">
<markdown ng-bind="text">#title
</markdown>
</div>
</div>
var myApp = angular.module('myApp', [])
myApp.directive('markdown', function() {
var converter = new Showdown.converter();
return {
restrict: 'E',
link: function(scope, element, attrs) {
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
}
});
see the fiddle
I know I could use wmd or pagedowm (as used on this site), but I wanted a minimal interface (no wysiwyg buttons, etc) and code size, and as the rest of the site will be using AngularJS I wanted to use that.
Source: (StackOverflow)
I want to create custom markdown tags using showdown.js such that:
==highlighted text==
renders:
<mark>highlighted text</mark>
Using the twitter extension as a baseline, I've been trying:
// #highlighted# syntax
{
type: 'lang',
regex: '\\B(\\\\)?==([\\S]+)\\b',
replace: function (match, leadingSlash, highlighted) {
// Check if we matched the leading \ and return nothing changed if so
if (leadingSlash === '\\') {
return match;
} else {
return '<mark>' + highlighted + '</mark>';
}
}
},
But this only lets me highlight single words, e.g.
- ==Apple ==Pear
- Apple Pear
I'd like to use == similar to **.
I assume the problem is the regex but can't seem to nail it. Can someone advise?
Source: (StackOverflow)
Im using Showdown.js and have implemented the tables extensions and got it working for normal tables.
The extension does not support 'Github Flavoured Markdown' for header alignment.
Example:
|Normal Heading | Right Aligned |
| ------------- | ------------: |
Please help me with what code I can include in my table.js file to add this support.
I found similar code in marked.js here.
Source: (StackOverflow)
I'm attempting to create a Showdown extension in my Angular app which will show scope variables. I was able to get it setup to show basic scope variables easily enough, but now I'd like to get it to where I can use the results of an ng-repeat and I can't get anything other than [[object HTMLUListElement]] to show.
Here's my controller so far:
app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
$scope.machines = [
{ abbv: 'DNS', name: 'Did Not Supply' },
{ abbv: 'TDK', name: 'The Dark Knight' },
{ abbv: 'NGG', name: 'No Good Gofers'}
];
$scope.machine = $scope.machines[0];
$scope.machine_list = $compile('<ul><li ng-repeat="m in machines">{{m.abbv}}: {{m.name}}</li></ul>')($scope);
$scope.md = "{{ machine_list }}";
var scopevars = function(converter) {
return [
{ type: 'lang', regex: '{{(.+?)}}', replace: function(match, scope_var){
scope_var = scope_var.trim();
return $scope.$eval(scope_var);
}}
];
};
// Client-side export
$window.Showdown.extensions.scopevars = scopevars;
}]);
Plunkr: code so far
I feel like I've got to be close, but now I don't know if I'm on the completely wrong track for this, or if it's a showdown thing or an angular thing or what.
Source: (StackOverflow)
Thanks to my fine StackOverflow friends, I have a great answer for this question.
So I have a great preview working -- ShowDown.js was the markdown parser I ended up using.
So my question now is this: do you all know of anyway to get ShowDown to render to my specifications using, say, CSS?
For instance, the way ShowDown renders text marked as 'monospace' is quite small, and I'd like to be able to manually adjust the size of the monospace tag.
If I can't, are there any other rendering engines I might try that do allow you to customize the rendering output?
Thanks.
Source: (StackOverflow)
I am currently trying to add my own extension to showdown using the ghost blogging platform. I am trying to make it so someone can type map and then a uk postcode and have it rendered to a map, like so [map bh278bf]. I have made sure the maps.js extension has been added and works as I have tested it. However my Regex knowledge is practically non-existent. I have got the RegEx to work here in Regexr.com, but when I run it nothing happens, I have used the same codepen and it also doesn't work and I have no idea what to do. I need some assistance in identifying the string!
The Expression:
/(\[map )([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]?[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)(\])/igm
The extension (maps.js)
(function(){
var maps = function(converter) {
return [
{
type: 'output',
filter: function(source) {
return source.replace(/(\[map )([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]?[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)(\])$/gim, function(match) {
return "<span>Map will go here</span>";
});
}
}
];
};
// Client-side export
if (typeof window !== 'undefined' && window.Showdown && window.Showdown.extensions) { window.Showdown.extensions.prettify = maps; }
// Server-side export
if (typeof module !== 'undefined') module.exports = maps;
}());
Source: (StackOverflow)
I am wondering whether I can create my new website in markdown instead of in html. showdown.js at https://github.com/coreyti/showdown seems to be a plugin that can do this.
I am thinking something like
<html>
<head>
<script type="text/javascript" src="/js/showdown-starter.js" />
<link rel="StyleSheet" rel='nofollow' href="mystylesheet.css" type="text/css" />
</head>
<body>
# Welcome
Hello. Welcome to my website.
</body>
</html>
Presumably, the client javascript would transform this into html that the browser likes.
Source: (StackOverflow)