2

I am trying markdown for creating notes and I feel limited in terms to style my notes and making it rich in style. for e.g. I would like to add warning/info style blocks using bootstrap css. How can I achieve this? I tried to add html in my markdown file as below:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js">
</head>
#Class 1

<button type="submit" class="btn btn-info">Submit</button>

But this doesn't seem to work. I am looking to do the following in my markdown file:

  1. Add bootstrap style warning/comments/suggestion blocks
  2. Placing images in a jQuery slider
  3. Placing a youtube or vimeo video in my markdown with features to control the playback controls
  4. Placing a soundcloud audio clip using a jQuery plugin
  5. Placing two or more images side by side with tooltip text

Please suggest if markdown can handle the above. I looked for Markdown,MultiMarkdown, Jekyll, but unable to find the answer to my questions. How markdown works? Can I mix html and markdown together?

Update: Tried multimarkdown syntax to include the css but that doesn't seem to work. Below is what I tried

CSS: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js

<style type="text/css"> 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js");
</style>
<button type="submit" class="btn btn-default">Submit</button>
Chetan Sachdev
  • 738
  • 1
  • 12
  • 31
  • Could you set up a working example? Also *what* does not work? – meskobalazs Jan 04 '15 at 15:20
  • The code section in my question above shows the example. Thats the content of my .md file. I have placed a button, with btn-info class, but the class does not get applied to the button. – Chetan Sachdev Jan 04 '15 at 15:22
  • So you are writing a markdown file, and using MultiMarkdown, you generate a html page? If you what is your output file? – meskobalazs Jan 04 '15 at 15:23
  • 1
    Issue depends on how you are processing the file, not just what's in it – charlietfl Jan 04 '15 at 15:26
  • I am using OSX and Marked2App(http://marked2app.com/) I don't know what it does behind the scenes. But as soon as I save my .md file, my markdown preview gets updated in marked2app. – Chetan Sachdev Jan 04 '15 at 15:40
  • 1
    Technically, the markdown syntax allows any valid HTML markup, so in _markdown_ you can absolutely include ` – Stephen Thomas Jan 04 '15 at 15:46
  • @StephenThomas I am using marked2app, which provides option to choose theme for my markdown output. During the initial draft of my markdown, I simply type content in markdown and preview it. And later I am trying to make it more rich using custom css and jquery plugins. But this doesn't seem to work for me. – Chetan Sachdev Jan 04 '15 at 15:49

1 Answers1

0

I myself only used the Linux command line markdown application, it did nearly exactly what you want.

The output for the command

markdown demo > demo.html

was this:

<p><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js">
</head></p>

<h1>Class 1</h1>

<p><button type="submit" class="btn btn-info">Submit</button></p>

The problem is, that it wraps everything in a paragraphs. The solution is simple. The header and footer should be a separate HTML file. So for example, under Linux I would do the following:

  • write the markdown file.
  • run markdown demo.md > demo.html
  • concat the three files: cat header.html demo.html footer.html >> fullpage.html

The same principle can be used for any OS.

Header and footer files:

This should go to the header:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="path/to/bootstrap.min.js">
</head>
<body>

And this should go to the footer:

<script type="text/javascript" src="path/to/jquery.min.js" />
</body>
</html>

So assume that the body is simply this markdown line:

# Title

After my steps described above, the following result will be reached:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="path/to/bootstrap.min.js">
</head>
<body>
<h1>Title</h1>
<script type="text/javascript" src="path/to/jquery.min.js" />
</body>
</html>
meskobalazs
  • 15,741
  • 2
  • 40
  • 63