arturadib / strapdown Goto Github PK
View Code? Open in Web Editor NEWInstant and elegant Markdown documents in the browser
Home Page: http://strapdownjs.com
License: MIT License
Instant and elegant Markdown documents in the browser
Home Page: http://strapdownjs.com
License: MIT License
I found this
http://lbesson.bitbucket.org/md/
and it seems more recently updated than this repository.
It also runs faster because the themes are bundled with it and not fetched from the web every time.
What is really the difference between the 2 repositories and which one is the original?
I frequently find myself wanting to be able to modify the DOM content of a strapdown document on the fly. For instance, when creating a SIP, I don't want to create a nearly identical document for each environment. I'd rather create a master document, with placeholders, and have a way to select the environment (say with a select box) which triggers replacing a placeholder with its appropriate value.
Has anyone figured out a decent way to do this?
RC1 it's out just from today, but opening an issue will help keep tracking of progress 😃
I usually open local files in a browser, and that works fine (xmp content is rendered).
However, if I try to serve the file (it has an html extension) over Apache, I get the page and can view all the source I'd expect, but the rendered page is completely blank. If I inspect the request, I don't see the JS get requested by the browser at all.
Is there something I'm missing? I'm having a hard time understanding why I'm seeing this behavior.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Load jQuery -->
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<!-- Load CodeMirror -->
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/mode/overlay.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/markdown/markdown.js"></script>
<script src="codemirror/mode/gfm/gfm.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/css/css.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/mode/clike/clike.js"></script>
<script src="codemirror/mode/meta.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
</head>
<body>
<div id="md-src" name="md-src"></div>
<!-- For Markdown source code -->
<xmp theme="united">
Markdown Text
=============
#Title
Normal **Bold** _Italic_ ~~Mistaken Text~~
</xmp>
<!-- Load Strapdown.js -->
<script src="strapdown/v/0.2/strapdown.js"></script>
<!-- Make a code editor -->
<script>
var editor = CodeMirror(document.getElementById("md-src"), {
mode: 'gfm',
lineNumbers: true,
theme: "default",
value: "_Italic_"
});
</script>
</body>
</html>
The thing is that I cannot type in the code editor.
However, commenting line 34 (as shown below) makes the code editor work again.
- <script src="strapdown/v/0.2/strapdown.js"></script>
+ <!-- <script src="strapdown/v/0.2/strapdown.js"></script> -->
I am using
Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?
Thanks for your great work!!
Piicksarn
Yeps ! That would be awesome !!!
Would be nice to work this into Bootstrap 4...
Related #22
I'd no time to give this a look but I guess the problem is here:
// Style tables
var tableEls = document.getElementsByTagName('table');
for (var i=0, ii=tableEls.length; i<ii; i++) {
var tableEl = tableEls[i];
tableEl.className = 'table table-striped table-bordered';
}
The right way to do this
document.body.replaceChild(newNode, markdownEl);
is
markdownEl.parentNode.replaceChild(newNode, markdownEl);
otherwise some browsers get confused in some sites (try, for example, to put strapdown inside blogspot, it won't work but the second line fixes the issue)
There is an issue with supporting headers in conjunction with Typora I described here
Issue with headers. Any idea why ?
Thanks a lot in advance
Frank
strapdown and MathJax usually work perfectly together, but not with an expression like:
$$a_n \sum_{i}$$
The problems seems to be ther {} around the i. Without, it works. Also without the a_n before it does (even with the {}'s). Strange problem since both of these Versions work:
$$a \sum_{i}$$
$$a_n \sum_i$$
Same problem with \prod instead of \sum by the way. The problem doesn't lie with MathJax, I checked.
edit: minimal example: http://leastaction.org/strapdown_bug.html
I really want to use anchor links to headlines. Creating a link works with
[A working anchor link](#gohere)
But I can not find any way of generating the id/target. It should look like this after being parsed by strapdown:
<a name="gohere"></a>
I am amazed that there are no examples of anchor links/bookmarks, I did find examples of links.
It's not working in html template.
consider the following markup
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
Hello World
</div>
<div class="panel-body">
<xmp theme="united" style="display:none;">
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>
</div>
</div>
</div>
</div>
See in codepen ->> http://codepen.io/kingRayhan/pen/pydgjv
Even , if I include strapdown.js in a html template , all content become blank.
However it's only work in this format which is showed in http://strapdownjs.com website.
<!DOCTYPE html>
<html>
<title>Hello Strapdown</title>
<xmp theme="united" style="display:none;">
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
See in Codepen ->> http://codepen.io/anon/pen/JXOGmv
I couldn't wrap the <xmp> .... </xmp>
in any html tag.
I think it would be a nice idea to add a note on the main page that it's easy to create the pages online with tools like JSBin (it even reloads automatically):
Is there an HTTPS version of the remotely-hosted source? I think that's getting in my way when trying to render my strapdown files on a secure host.
I tried <script src="https://strapdownjs.com/v/0.2/strapdown.js"></script>
, but that doesn't seem to exist; and I tried <script src="https://raw.githubusercontent.com/arturadib/strapdown/gh-pages/src/strapdown.js"></script>
, and that half-worked, but it still showed a blank page, maybe due to it being unable to fetch the other assets it needs. (I'm not sure.)
Thanks,
Jamie
Would you consider a PR for building the bundle with gulp? http://gulpjs.com
As the titile goes, is there any way to solve the problem of Chines Displaying ?
Thanks very much!
Would be very easy to implement a flag on the <xmp>
tag to include an external bootstrap CSS (from http://www.bootstrapcdn.com/ )
Hi, I am in favor of Markdown and AsciiMath. AsciiMath is another javascript that enables something similar to Markdown that allows me to edit formula with text, see http://asciimath.org/. Unfortunately, strapdown and AsciiMath does not work properly together at the moment.
Currently, I can use AsciiMath only outside of <xmp> block, this is not convenient as I also want my text to come with formula.
I am not able to propose a solution. However, I will be grateful if strapdown can solve this issue. So that we can use simple text to write documents with formulas.
Markdown is great, but I like the tables and footnotes support added by MultiMarkdown.
Any chance strapdown could support MultiMarkdown instead of just plain Markdown?
(Please note: I have no idea how simple or complex such a change would be, hence the question.)
Hi, I took a look at other issues, and the whole homepage and I can't find out how to get started!
As of now, only Bootswatch themes are optional. Why not making Prettify themes optional too. And not only this, but supporting local/external paths to custom themes. It would make it really simple to customize the output without messing up with the source code. Maybe something like:
{
// hypothetical strapdown setup
bootstrapTheme: "united", // name, path, or empty for default
prettifyTheme: "sunburst" // name, path, or empty for default
}
The question is: Is that feasible by any means?
I found this library to be very useful, and one of my colleagues used it to help us build API documentation that didn't require us to replace all of the >
and <
with >
and <
. In fact, I see it as a competitor to static-site generator tools like Jekyll, Octopress, and DocPad. In fact, that's exactly what we did with our API documentation. we used Strapdown.js to create a static page.
However, it recently came to my attention that <xmp
has been deprecated since HTML3.2.
Should you consider using a non-deprecated tag in this library, such as <pre>
or <code>
as suggested by the Mozilla HTML documentation on XMP?
Note: Do not use this element.
- It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from the language in HTML5.
- Use the
<pre>
element or, if semantically adequate, the<code>
element instead. Note that you will need to escape the'<'
character as'<'
to make sure it is not interpreted as markup.- A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property.
Browsers may drop support for the behaviour provided by this tag.
Could you add support for multipage with nice AngularJS routing, see
http://docs.angularjs.org/tutorial/step_07
when I put code
<http://www.google.com.hk>
It doesn't show a link.
Hello,
Very nice module but I want using this without theme because I want display the render into a personal layout.
How should I do?
Thanks
Characters with accents display funny. Any workarounds? Thanks
Example: multiplicación
instead of multiplicación
. Example document: http://knuth.uprrp.edu/~rarce/tgh.html
Is there a way (no just title) to add some top menu links to the header?
thanks
Steve,
I tried to embed a gist using
<script src="https://gist.github.com/3361651.js?file=com.tjluoma.keeprunning-growl.plist"></script>
but nothing appears on the rendered page.
when i link an anchor in my markdown the header hides part of the text
example: http://yawnt.github.com/hater/documentation.html
nice job btw :D
Is it possible to set the maximum width of the main column?
Thanks
There is one quite new Bootswatch theme called Cosmo http://bootswatch.com/cosmo/
http://strapdownjs.com is down likely due to the legacy Github Pages IP deprecation
It'd be rad to have a theme that looks like a README.md looks here on GitHub.com. Maybe with https://github.com/sindresorhus/github-markdown-css or something.
When I wrap my content with the xml tag it renders it in a box of html code. Can you refer me to the documentation with further instructions on how to use this?
This is follow-up of issue #71
I notice that I cannot use math symbol within the text. For example:
Given a set of observations
(x_1, x_2, ..., x_k)
, where each observation is a
d-dimensional real vector, k-means clustering aims to partition the n
observations into k (≤ n) setsS = {S_1, S_2, ..., S_n}
so as to minimize the
within-cluster sum of squares (WCSS) (sum of distance functions of each point in
the cluster to the K center).
Here the math part cannot be interpreted correspondingly. I tried to replace x_1 with x1 and then I noticed HTML tags cannot be used.
I've noticed that on mobile safari and chrome on ios6 and android, the detection code that finds the navbar element and should prevent the default navbar from rendering if one is already present in the DOM doesn't seem to work. As a result, I get two navbars on iphone safari and android chrome. I'm using strapdown on my personal site here:
where you can see the effect. On the desktop browsers, only one navbar gets rendered - the one I defined, which is correct.
BTW, strapdown has saved me a lot of work so thanks for the good work. I may get time to look into this sooner on the weekend but I wanted to mention it in case you might know the cause. The mobile rendering is beautiful.
This is a github-flavor-markdown only thing, but can it be added to strapdown?
Features
Search-engine friendly
How friendly is strapdown to search engine?
For example, will search engine follow links in markdown?
When using tabs, not spaces, for indenting, and trying to add a code block inside a list item, the code block will not be rendered as such if the bullet/number and the text are separated by a tab too:
* Item one
code block inside item one
* item two
Note that, in spite of how Github may render this, I used tabs, not spaces, to indent and to pad the text in the list items.
Neither Markdown Web Dingus nor Github have an issue with this case and displays those code blocks as code blocks.
A nice feature would be the possibility to keep the actual markdown text in a separate file instead of embedding it in a xmp tag. This would allow to have a markdown file for editing (and correct syntax highlighting in the editor) and a html file for viewing. It probably can already be done via XMLHTTPRequest but a prepared user friendly one-liner to include a client side markdown file would be great.
Hey guys. Is there a way to load markdown plain text from a text file using jquery .get?
Here's my code for reference:
<!doctype html>
<html>
<div id="article"></div>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get("mytextfile.txt", function(data) {
var markdown = "<xmp theme=\"readable\" style=\"display:none;\">";
markdown += data;
markdown += "</xmp>";
$("#article").html(markdown);
});
});
</script>
</html>
This doesn't seem to work. Console log returns TypeError: markdownEl is undefined
. Any idea how to fix this?
Marked documentation, states that it supports GFM tables. But when I place some table markdown like this:
Header 1 | Header 2
-------- | --------
Cell 1 | Cell 2
Cell 3 | Cell 4
it is not rendered as it is rendered on GitHub:
Header 1 | Header 2 |
---|---|
Cell 1 | Cell 2 |
Cell 3 | Cell 4 |
It just makes the first row an H2 tag.
Heeding the call for simplicity (but making sure that I could have control, on principle), I copied strapdown.js
to my website and changed the URL. That didn't work, because it doesn't include the CSS files.
Presumably, I need to copy all (well, most of) the contents of https://github.com/arturadib/strapdown/tree/gh-pages/v/0.1 into a folder. Some instructions for that, as well as a concise download, would be nice.
Is it possible to use this with SSL enabled, without having to load insecure content?
I cannot resolve https://strapdownjs.com/v/0.2/strapdown.js
If I try with https://raw.githubusercontent.com/arturadib/strapdown/gh-pages/v/0.2/strapdown.js it loads without a theme.
If I do this:
<xmp theme='superhero'>hello</xmp>
<script src='…'></script>
It bwargles itself on the missing title element, no output is shown.
Much needed improvement, I believe.
Could you add a Table Of Content in right end of a "navbar" / topbar?
It should be invisible (only some tiny indicator, something like dimmed arrow pointing down),
but when you hover over it, some dropdown menu should emerge.
It should be automatically generated from H2 (or more) tags.
You've got the picture :)
BTW: I see no reason, other than this, for this top-navbar.
Thanks.
Anyway - great idea.
I made a plugin for Sublime Text 2 to use it as Markdown Preview.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.