Markdown to HTML

[fredx181]

Hi All,
==============================================================
EDIT 2019-04-27, see for a GUI program to convert markdown to html, here:
http://murga-linux.com/puppy/viewtopic. ... 22#1026422
EDIT: portable version of md2html-gui, has choice for different styles, 64 and 32 bit, here:
http://murga-linux.com/puppy/viewtopic. ... 90#1026490
EDIT 2019-04-30 New portable version 0.2 has "Preview in Browser" button:
http://murga-linux.com/puppy/viewtopic. ... 41#1026741
EDIT 2019-05-02 Version 0.3 has gtkdialog GUI
http://murga-linux.com/puppy/viewtopic. ... 36#1026936
EDIT 2020-07-01 Version 0.4 of md2html-gui, changes, see here:
http://murga-linux.com/puppy/viewtopic. ... 65#1062065
==============================================================

I've been looking for a small program to convert Markdown to HTML, there are a lot, but most of them require ruby, perl, python or nodejs (with dependencies), and found this written in C:
https://www.pell.portland.or.us/~orc/Code/discount/
Compiled and made a .pet for it (see attached)
From what I tested it works on old and new 32-bit puppies.
Contains (cli) programs: markdown, mkd2html and makepage.
man markdown
man mkd2html
EDIT: Another way is to use https://dillinger.io/ if you don't mind being dependent on an online service.

As an example to demonstrate for a 2 columns table (as greengeek is looking for a similar thing here):, create a new file "in.md"
Open with text-editor and paste the following in it:

Code: Select all

# Header....

| Personal     |  Work           |
| :----------------|  :--------------- |
|Long text: All on one line, wrapping automatically. All on one line, wrapping automatically All on one line, wrapping automatically. All on one line, wrapping automatically. All on one line, wrapping automatically.|Short text here
|Medium short text, blablablah|Long text: All on one line, wrapping automatically. All on one line, wrapping automatically All on one line, wrapping automatically. All on one line, wrapping automatically. All on one line, wrapping automatically.
|Hi!|Short text
|Text, blablablah|Short text
|Hi!|Short text
||Left column is empty
|Right column is empty|

Or, much more simple (above is mostly for to demonstrate wrap with long text):

Code: Select all

| Applications     |  Others           |
| :----------------|  :--------------- |
|alsamixer-tray|apulse
|azpainter|broadcom-wl-driver-k4.9.0-3-686-pae
|ceni|conky-cli
|conkyclock|conky
|conkyclock2|libpng12-0
|cputemp|libx264-132
|create-portable|emelfm2
|epdfview|gtkdesklet
|deadbeef-static|gtkdialog
|firefox-esr|guessfstype
|dropboxgui|libmusicbrainz3-6

Then (I used mkd2html and added style block):

Code: Select all

# convert markdown to html
mkd2html in.md out.html

# add style block, table-layout: fixed, width: 100%
echo '<style>

table {
  width: 100%;
  margin: 6px auto;
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
  border: solid 1px #D2D5D8;
  text-align: center;
}

.w {
  width: 100%;
}

</style>
' >> out.html

See pic below for out.html displayed in Firefox.
Much more styling can be done with a more advanced style block of course.

Also you can use mkd2html with -css option, e.g. (pointing to e.g. style.css)

Code: Select all

mkd2html -css style.css in.md out.html

But then out.html is not a standalone html (depends for style on style.css)

Fred

[step]

Thank you. Another option is Fatdog's mdview, which can display (GTK2) and convert (to decorated text and html) a subset of markdown. Alas, the subset doesn't include tables. Interestingly, it supports multi-language markdown (gettext).

[greengeek]

Then (I used mkd2html and added style block):

Code: Select all

# convert markdown to html
mkd2html in.md out.html

# add style block, table-layout: fixed, width: 100%
echo '<style>

table {
  width: 100%;
  margin: 6px auto;
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
  border: solid 1px #D2D5D8;
  text-align: center;
}

.w {
  width: 100%;
}

</style>
' >> out.html

I am not understanding this portion - is this another file? Or is it a script of some kind? Where do i input this code?
cheers!

EDIT - ok, i got it now - i had not installed the pet.
(Have to use

Code: Select all

mkd2html in.md out.html

in a terminal AFTER installing the pet)

[fredx181]

EDIT - ok, i got it now - i had not installed the pet.
(Have to use
Code:
mkd2html in.md out.html
in a terminal AFTER installing the pet)

Yes, but also adding the style block to out.html may be important, if you want the columns same size (fixed) and the width 100%.

Fred

[fredx181]

Hi All,

Much more styling can be done with a more advanced style block of course.

Here's attached a little script that makes the markdown > html "github styled"
Took the github "template' (included in script) from markdown-styles here:
https://raw.githubusercontent.com/mixu/ ... rkdown.css

It's usage may need a manual edit of the script, set it on top (input, output and title)

Code: Select all

#######################################
# set input (.md) and output (.html)
IN=/root/in.md
OUT=/root/out.html
TITLE=MarkdownToHTML-Example
#######################################

So,in case keeping the default, before running the script, create "/root/in.md" containing the Markdown code and it will convert to /root/out.html
And depends on having installed the markdown-discount .pet attached at post #1

The script can be much more advanced, just a start to experiment with, for now.

EDIT: Re-attached the script, fixed a bug (earlier version didn't work because I tested with other markdown version)

Fred

[B.K. Johnson]

Hello
This is a markdown to .html thread, i know, but I couldn't resist a mock-up using Composer. Forgive me!

[greengeek]

Then (I used mkd2html and added style block):

Code: Select all

# convert markdown to html
mkd2html in.md out.html

# add style block, table-layout: fixed, width: 100%
echo '<style>

table {
  width: 100%;
  margin: 6px auto;
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
  border: solid 1px #D2D5D8;
  text-align: center;
}

.w {
  width: 100%;
}

</style>
' >> out.html

I am uncertain how/where/when you are inserting the style block.

When i enter

Code: Select all

mkd2html in.md out.html

in a terminal i get the output file - but as you pointed out I am not adding the style block. I just don't see how/where this is done.

[fredx181]

Then (I used mkd2html and added style block):

Code: Select all

# convert markdown to html
mkd2html in.md out.html

# add style block, table-layout: fixed, width: 100%
echo '<style>

table {
  width: 100%;
  margin: 6px auto;
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
  border: solid 1px #D2D5D8;
  text-align: center;
}

.w {
  width: 100%;
}

</style>
' >> out.html

I am uncertain how/where/when you are inserting the style block.

When i enter

Code: Select all

mkd2html in.md out.html

in a terminal i get the output file - but as you pointed out I am not adding the style block. I just don't see how/where this is done.

Well.. yeah, sorry, I assume too easily that people do the same as me: I always select a code and "paste" in terminal with mouse middle click.
So maybe better make a script from it, or just use a text-editor (leafpad ) to add this (the style block) to the bottom of out.html :
(after done the mkd2html command)

Code: Select all

<style>
table {
  width: 100%;
  margin: 6px auto;
  table-layout: fixed;
}

table,
td,
th {
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
  border: solid 1px #D2D5D8;
  text-align: center;
}

.w {
  width: 100%;
}
</style>

Then it give the same result as what the above echo command would do (echo '<style> .... .... </style> ' >> out.html)

Fred

[fredx181]

Here's a GUI program using yad for to convert markdown to html: md2html-gui
(remove fake .gz extension and make executable)
Depends (obviously) on yad and markdown (commandline utility) the markdown-discount .pet attached in post #1 contains it.

Usage is easy, just type or paste the markdown text in the textarea and select (or type) output file. (see pic).
Currently only Github style available, I may extend it later with more style choices.

Also fixed a bug for the earlier shared (simple) script "mdtohtml", see EDIT here:
http://murga-linux.com/puppy/viewtopic. ... 53#1026253

EDIT: Re-uploaded, added dark theme and changed demo text

Fred

[fredx181]

Portable version of md2html-gui for 32 and 64 bit attached, changes: added more styles (see pic).
Contains yad and the markdown command-line utility, so not needed to have these installed (it's standalone program (self-extracting script) that contains also templates for the different layout styles) .

The created HTML is standalone (has style code included)

Most style css codes I took from here:
https://github.com/mixu/markdown-styles ... er/layouts

Fred

[B.K. Johnson]

Fred,
You seem to like the word "portable". I saw you use it regarding "portable firefox", then you and Mike Walsh with "portable seamonkey". And just now ran into "portable md2html-gui". I know English is not your mother tongue, but this repeated use of the word is not consistent with the English meaning of the word. As used in the 3 cases, "portable" is an adjective and I refer you to the Miriam Webster Dictionary. I use neither of your "portable" browsers but have a vague idea that what it does is encapsulates firefox with apulse into a package to allow the newby user a "sound for sure" experience. Admirable, but that's not a "portable" firefox AND I AM NOT THE LANGUAGE POLICE . Seamonkey does not have the pulseaudio sound issues, so I don't know the rationale for a "Portable seamonkey". Did I understand incorrectly that your "package" is a means of putting firefox in /home (nothing new) and combining it with apulse? Neither browser is any more portable to another puppy or anywhere else than the original firefox. How different is it from an application and its dependencies? I don't understand where you see portability. A more appropriate name to reflect the combination of firefox and apulse would IMHO be all-in-firefox or combo firefox or apulsefox or foxapulse or foxsound or ff<something>.

I can't comment on md2html. I note however, that in one post you refer to md2html, then in the very next, md2html-portable. I would only ask: what did you do with md2html to suddenly make it acquire portability?

[fredx181]

Hi B.K. Johnson,

In my view, portable means that you can boot a puppy, click on the executable file and it runs, boot another puppy and it runs too. Not required to install anything.
I case of md2html, the first (not-portable) was a script that depends on having yad and the markdown-discount pet (from first post attached) installed.
The md2html-portable has these binaries included (also style templates) as I mentioned in my previous post (self-extracting script).

The firefox-portable is a bit different, called it portable because of apulse included and the profile folder inside (instead of /root/.mozilla), but it needs gtk3, which is not installed on most older puppies, so let's call it half-portable

Fred

[B.K. Johnson]

reserved for rebuttal to FredX181 on "portables".
[EDIT April 30/19]
This is not my full reply, but I thought I'd quickly get the point out: you are skating on thin ice legally. Using the name "portable firefox" could be a copyright infringement.

[fredx181]

reserved for reply to 'rebuttal to FredX181 on "portables"' from B.K. Johnson

reserved for rebuttal to FredX181 on "portables".
[EDIT April 30/19]
This is not my full reply, but I thought I'd quickly get the point out: you are skating on thin ice legally. Using the name "portable firefox" could be a copyright infringement.

Thanks anyway for the warning, but very small chance that it would cause me trouble, firefox is open-source AFAIK, and besides that, this is just hobby/amateur software shared on some forum, no competition for mozilla.

[musher0]

Hello
This is a markdown to .html thread, i know, but I couldn't resist a mock-up using Composer. Forgive me!

Tested it, and it's a great template. Thanks.
No apologies necessary.
It's the other guys who like to split hairs!

[fredx181]

New portable md2html-gui, version 0.2, with "Preview in Browser" button added.
This way the result of converting to html can be viewed first before creating the final output.

EDIT: Made a mistake by including a too old version of yad in the 64-bit version (therefore the preview button didn't work), should be fixed now, re-attached.

Fred

[fredx181]

Version 0.3 has gtkdialog GUI (previously was yad)
Thanks to Geoffrey for giving me a start concept
Pet packages for 32 and 64 bit attached.
(markdown commandline utility is included in the package)

Fred

[jplt3]

Thanks fredx181 for this great tools md2html.

It would be very useful if we have the possibility to load an md file in md2html via the gui or via command line

Code: Select all

md2html-gui /place/of/my_file.md

...

Thanks for your work.

[fredx181]

Thanks jplt3. Yes, good idea, v0.4 pet packages attached below, changes:

- Can load md file (or any plain text file) from commandline as argument, e.g:

Code: Select all

md2html-gui /place/of/my_file

When no file loaded, the demo will show from wiki at https://github.com/adam-p/markdown-here

- Added to GUI option to load input (markdown) file

Fred

[jplt3]

So great fredx181,

you let the old version in /usr/local/md2html-0.3 :

Code: Select all

.
├── bin
│   └── md2html-gui -> /usr/local/md2html-0.3/md2html-gui
├── local
│   └── md2html-0.3
│       ├── layouts
│       │   ├── github
│       │   │   ├── github-markdown.css
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   └── pilcrow.css
│       │   ├── jasonm23-dark
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   ├── jasonm23-foghorn
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   ├── jasonm23-markdown
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   ├── jasonm23-swiss
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   ├── markedapp-byword
│       │   │   ├── hljs-github.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   ├── thomasf-solarizedcssdark
│       │   │   ├── hljs-solarized-dark.min.css
│       │   │   ├── page.html
│       │   │   ├── pilcrow.css
│       │   │   └── style.css
│       │   └── thomasf-solarizedcsslight
│       │       ├── hljs-solarized-light.min.css
│       │       ├── page.html
│       │       ├── pilcrow.css
│       │       └── style.css
│       ├── markdown
│       └── md2html-gui
└── share
    ├── applications
    │   └── Markdown_to_HTML.desktop
    └── pixmaps
        └── md2html.png

15 directories, 37 files

By the way you save my day , great thanks.