arturadib / strapdown Goto Github PK

View Code? Open in Web Editor NEW

2.5K 2.5K 411.0 1.27 MB

Instant and elegant Markdown documents in the browser

Home Page: http://strapdownjs.com

License: MIT License

CoffeeScript 0.76% CSS 7.13% JavaScript 92.12%

strapdown's People

Contributors

Stargazers

Watchers

Forkers

ghosti bronfman cstrawser hailang bror-se repos-javascript kreely zenweasel plurby pvillega aglee tianyow erikkjell cyrke evanportwood majoral innocodive coffeebook dapstr meckers crastapj mathiasrw akesling gitgrimbo vahe edwardean nvh mokona7xss didiercrunch roine saidalavi colthreepv cornil mecca831 cshen ttuellmann zhengbo8 startupeando q3aiml cmono murray26 harishpillay jpsirois shijir danwoodward klevak kalashnikov harryjubb webcollection rivy js252 jbsarrodie wangpinchieh stbnjenkins atifaziz korv roadlabs hontas llarsell jerkovicl veshinak honigp derickc ndossougbe ayakimovich mr-ex postsql v2singer ajaali josephcc mvtango arieel-ost bgbt trepidacious rookie rachidh2008 greenek shoe-string icruces jpuntd wulb adaksuman hectorguo liaoyu qingxuanrk smzg losecher rohitdharavath roachhd bs91 muddflappz jwfy tleveque23 kami1983 squeeg strongme mikeder gustavopinto flagsoft ragnardanneskjold

strapdown's Issues

navbar renders twice on iphone and android with safari and chrome

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:

http://davidwatson.org/

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.

Not working in html template

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.

header bug

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

How to get started?

Hi, I took a look at other issues, and the whole homepage and I can't find out how to get started!

embed of gist doesn't work?

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.

Anchor link ids are not generated?

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.

Getting a Navbar (top menu) on header?

Is there a way (no just title) to add some top menu links to the header?
thanks

Steve,

Load from text file using jquery

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?

No theme

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

Support Bootstrap 3

RC1 it's out just from today, but opening an issue will help keep tracking of progress 😃

http://twitter.github.io/bootstrap/

search-engine friendly?

Features

Search-engine friendly

How friendly is strapdown to search engine?

For example, will search engine follow links in markdown?

Call replaceChild on parent

The right way to do this

document.body.replaceChild(newNode, markdownEl);

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)

Difference between this github repo and the one in bitbucket

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?

My html is in a box

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?

Any way for display Chinese?

As the titile goes, is there any way to solve the problem of Chines Displaying ?
Thanks very much!

Support for Font-Awesome

Yeps ! That would be awesome !!!

http://fortawesome.github.io/Font-Awesome/

Add support for Cosmo theme

There is one quite new Bootswatch theme called Cosmo http://bootswatch.com/cosmo/

Bootstrap 4

Would be nice to work this into Bootstrap 4...

XMP tag has been deprecated since HTML3.2

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 &lt. 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.

Work with AsciiMath

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.

GitHub Theme

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.

Table alignment not working (although it does in marked)

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';
}

Online support

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):

http://jsbin.com/alahos/1/

Dynamic Content

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?

Flag to include remote bootstrap

Would be very easy to implement a flag on the <xmp> tag to include an external bootstrap CSS (from http://www.bootstrapcdn.com/ )

Include external markdown files

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.

Characters with accents display funny

Characters with accents display funny. Any workarounds? Thanks

Example: multiplicaciÃ³n instead of multiplicación. Example document: http://knuth.uprrp.edu/~rarce/tgh.html

Any chance that multimarkdown could be supported?

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.)

Update to Bootstrap 3

http://getbootstrap.com

HTTPS Version of Remotely Hosted Assets

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

Set maximum page width

Is it possible to set the maximum width of the main column?

Thanks

MultiPage with AngularJS

Could you add support for multipage with nice AngularJS routing, see
http://docs.angularjs.org/tutorial/step_07

HTTPS Support

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.

Build with gulp

Would you consider a PR for building the bundle with gulp? http://gulpjs.com

Consider adding tags for the repo.

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

TOC in navbar

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.

Checkboxes don't work

This is a github-flavor-markdown only thing, but can it be added to strapdown?

Some chars are not rendering inside code blocks correctly - " < >

Some chars are not rendering inside code blocks correctly:

var mystring = "some text";
renders as;
var mystring = &ampquot;some text&ampquot;;

var lst = new List();
renders as;
var lst = new List&amplt;string&ampgt;();

Documentation for self-hosting.

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.

Not support Markdown Link wrapper

when I put code

<http://www.google.com.hk>

It doesn't show a link.

Crashes when no <title> element present.

If I do this:

<xmp theme='superhero'>hello</xmp>
<script src='…'></script>

It bwargles itself on the missing title element, no output is shown.

xmp tag is depreciated

Browsers may drop support for the behaviour provided by this tag.

Tables are not supported

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.

Code blocks inside lists with tab indenting rendered as plain text

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.

Odd bug in combination with MathJax

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

Serving Strapdown Files

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.

Strapdown ignores header hierachy, using only header level 1

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

Support Optional Resources

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
}

Bootstrap defaults may be reached from: http://www.bootstrapcdn.com/
Bootswatch themes may be reached from: http://www.bootstrapcdn.com/ too
Prettify themes may be reached from http://strapdownjs.com/ as no other CDN is available (current version works like this anyway)
Users will be able to load other skins like: http://weblees.com/bootstrap-skins/#.UoZzDGSifbw (not all styles are applicable I know, I know! but any output will be better than Bootswatch anyway).

The question is: Is that feasible by any means?

Incompatible with CodeMirror

<!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

CodeMirror v4.8
Strapdown.js v0.2
Firefox v33.1.1

Website is down

http://strapdownjs.com is down likely due to the legacy Github Pages IP deprecation