Can I use custom css / jquery plugins / html in my markdown file

Question

Can I use custom css / jquery plugins / html in my markdown file

1.2k Views Asked by Chetan Sachdev At 13 April 2025 at 02:32

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:

Add bootstrap style warning/comments/suggestion blocks
Placing images in a jQuery slider
Placing a youtube or vimeo video in my markdown with features to control the playback controls
Placing a soundcloud audio clip using a jQuery plugin
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>

Original Q&A

There are 1 best solutions below

**meskobalazs** · Answer 1

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>

Can I use custom css / jquery plugins / html in my markdown file

There are 1 best solutions below

Header and footer files:

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in MARKDOWN

Related Questions in GITHUB-FLAVORED-MARKDOWN

Related Questions in MULTIMARKDOWN

Trending Questions

Popular # Hahtags

Popular Questions