The biggest issue is that Bitbucket Server adds padding, margin and border CSS styles to the images, which is not done in most other Markdown renderers (e.g. MarkdownPad2 or GitHub). I attached a screenshot with the Bitbucket Server generated HTML and the HTML generated by the MarkdownPad 2 editor that I use to create the files, side by side. Using Sundown C library. Generates HTML from Markdown, compiles to both Clojure and ClojureScript. The Bitbucket provider allows you to manage resources including repositories, webhooks, and default reviewers. Use the navigation to the left to read about the available resources. Username - (Required) Your username used to connect to bitbucket. You can also set this via the environment variable.
Replaces the Markdown preview with Bitbucket styles. Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Copied to clipboard. Overview Version History Q & A Rating & Review. Markdown Preview with Bitbucket Styles Features. Markdown is a popular text formatting syntax these days. With Pandoc it is easy to convert markdown files to PDF, Words docx or many other formats.
Either direct or other lists
- stackoverflow Question 11 lists some and references
In Python universe, some packages. There are more.
- Markdown with its features
In Perl, there is a package:
Wikipedia has a list that is reproduced here, so that we can add/remove columns and Markdown processors.
|Name||Language||Type||Description|| Official site|
|mmd2pdf||Autoit||-||MultiMarkdown to PDF converter||google code|
|md2html.awk||Awk||Converter||Markdown to Html||bitbucket|
|apache-mod-sundown||C||Apache HTTPd module||Using Sundown C library||github|
|Discount||C||Library and HTML converter||-||site|
|peg-multimarkdown||C||-||Using parsing expressing grammar (PEG)||github, github fork|
|peg-markdown||C||-||Using parsing expressing grammar (PEG)||github|
|PEG Markdown Highlight||C||Syntax highlighter||Using parsing expressing grammar (PEG)||site|
|libupskirt||C||Parser||Fork of libsoldout||github|
|libsoldout||C||Parser||Simple parser only||site|
|Doxygen||C++||Sourcecode documentation generator||Doxygen supports Markdown with extra features||site|
|Cpp-Markdown||C++||Generator||Markdown to HTML||sourceforge|
|RStudio||C++||IDE for R (programming language)||C++ wrapper for sundown||site|
|Qarkdown||C++||Editor (Qt)||Simple crossplatform Markdown editor using Qt||site|
|markdown-clj||Clojure||Converter||Generates HTML from Markdown, compiles to both Clojure and ClojureScript||github|
|MaTeS||Go||Converter to HTML5||Creates web pages or presentation slides. Supports citation, tables, math and charts.||site|
|MarkdownPapers||Java||-||Implementation based on a JavaCC parser||site|
|Markdown4j||Java||-||Extensible markdown java implementation||google code|
|Lunamark||Lua||Converter||HTML and LaTeX converter||github|
|node-multimarkdown||Node.js||Parser||Native MultiMarkdown extension for Node.js||github|
|node-markdown||Node.js||-||Parse Markdown syntax with node.js||github|
|gfm||Node.js||-||The port of Showdown used on github.com||github|
|Markdown||Perl 6||Parser||Markdown parser in Perl 6||github|
|Markdown.pl||Perl||Converter to (X)HTML||Official author perl markdown implementation||site|
|MultiMarkdown||Perl||Converter||Markdowns originals MultiMarkdown superset||site, github|
|text-markdown||Perl||Converter to (X)HTML||-||github|
|markdown-oo-php||PHP||Converter to (X)HTML||Object-oriented implementation of Markdown||github|
|markdown-handler||PHP||Converter to (X)HTML||github|
|PHP Markdown||PHP||Converter to HTML||-||site|
|PHP Markdown Extra||PHP||Converter to HTML||Markdown with extra options||site|
|PHP Markdown Extended||PHP||Converter to various formats (HTML, MAN, extensible)||Markdown extended syntax||github|
|PHP Markdown Viewer||PHP||Viewer||Wrapper for PHP Markdown||site|
|secondcrack||PHP||Blog||A static-file Markdown blogging engine||github, site|
|qlmarkdown||Objective C||-||A Mac OS X Quicklook extension that uses Discount.||github|
|Python-Markdown||Python||-||A implementation with various extensions such as tables and ignoring internal bold/italic markings.||site|
|Misaka||Python||Binding||Python binding for Sundown||site|
|gimli||Ruby||Markdown to PDF||-||gimli|
|md2man||Ruby||Converter||Markdown to manpage||github|
|markdownr.com||Ruby||Webviewer and Editor||A nifty markdown notepad||site/github|
|RDiscount||Ruby||Binding||Ruby binding for Discount||github|
|Redcarpet||Ruby||Binding||Ruby binding for Sundown||github|
|Lowdown||Chicken Scheme||Parser library (egg)||Can emit SXML||chicken wiki, Bitbucket|
|markdown.bash||Bash||Converter||Markdown to Html||Github|
Alternative lightweight markup formats
Bitbucket Markdown Table
Markdown and GitHub
First Steps Toward learning Modern Digital Practices for Sustainable and Shareable Research
Tuesday January 26, 2018, 12:30-3:30pm PST
UCSB South Hall 2509
- Discuss principles for sustainable and shareable research.
- Introduce the use of Markdown and GitHub for following these principles.
- Set up and practice tools for working with Markdown and GitHub.
- Establish a common set of tools for the WE1S team.
- Install a code editor. WE1S uses Visual Studio Code as its standard editor.
- Install the
markdownlintextension for VS Code.
- Create a GitHub account and let me know your username (starring the workshop repository does this).
- Install the GitHub Desktop Client.
Documents should be created to conform to the following ideals:
Simplicity is about ease of production—and reproduction.
- Simple layout and styling
- Semantic markup where possible
- One column and minimal horizontal spacing
- Minimal graphic elements
- Limited number of styling options for text emphasis
- Avoid applying multiple styles (e.g. bold and italic) to single text elements
Markup symbols should describe content or style (but not both).
Clarity is about ease of reading.
- Minimal tagging
- Easily-recognized markup symbols
Standards are about best practices for simplicity and clarity, as well as for easy conversion between formats. Document format, structure, and styling should
- follow commonly used, rather than project-specific patterns, wherever possible;
- allow people not connected with your project to read and modify your content;
- allow digital tools made for general use to process your content.
These are principles, not rules.
In some contexts, there are good reasons to set them aside.
Common Types of Markup
- HTML: Uses tags in angle brackets to (ideally) describe the semantic structure of web pages.
- CSS: Uses property-value pairs to describe the styling of elements on web pages.
- XML: Uses tags in angle brackets to describe the semantic structure and styling of any document. For rendering, XML documents are normally transformed into other formats.
These, and similar types of markup are intended to produce “rich” documents, so they contain vocabularies that risk violating the principles of simplicty and clarity.
What Is Markdown?
Markdown is a plain text format for writing structured documents. Instead of tags, it uses symbols that were conventional in the early days of email before we had rich text editors.
- Markdown can be produced in a simple text editor.
- Markdown has a small number of formatting elements.
- Markdown is typically converted to HTML for the display on the web but is easily converted to other formats.
Common Uses of Markdown
- Documents and issues on GitHub
- Ryver (WE1S’s team communication tool)
- Static website generators (e.g. Jekyll)
Increasingly, developers are producing tools that support Markdown (including
reveal.js, which was used to produce this slideshow).
People are also using Markdown for general writing because of its ease of use, because it enforces principles of simplicity and clarity, and because it is easy to convert to multiple formats.
Why do I have to learn Markdown?
Can’t I just use Word? I know how to use that.
Even if you know how to use Word well, do you?
Do you really?
Problems with Word
Word hides its (proprietary) markup, which encourages users to be sloppy. As long as it looks all right, who cares?
Word’s powerful features tempt users to violate the principles and best practices enforced by Markdown.
Word would be better if there were a tool to check documents against a schema that describes what a good document should look like. This process is known as “validation”.
There are good reasons for using Word in some contexts, but give Markdown a try, and you'll find yourself using Word less and less.
How to Write Markdown
- Save your file as plain text. It is conventional to use the extension
- Any editor will do, but, as we’ll see, a code editor has some advantages.
- When learning Markdown, it is helpful to use online editors like StackEdit.io.
The Concept of Linting
A linter is any tool that detects and flags errors in programming languages, including stylistic errors...For example, modern lint checkers are often used to find code that does not correspond to certain style guidelines.
Linting our Markdown (or any other code) is one way that we can ensure that it is well-formed according to the standards of the markup language and valid according to a schema that describes our style practices.
Most online Markdown editors will not correctly render Markdown as HTML if they are not well-formed, but they don’t always tell you what is wrong. A good linting tool will do this.
A linter for bibliographical citation would be the Holy Grail.
Problems with Markdown
- Markdown does not support some really useful functions like external links and image sizing. For this, you need to fall back on HTML and CSS (that is, you need to know some HTML and CSS).
- Because Markdown was not initially published as a standard, multiple dialects were developed. This leads to some inconsistency both in the format of Markdown documents and in how parsers render Markdown.
A standard known as CommonMark is nearing completion. It is the basis for GitHub-Flavored Markdown, which has some additional extensions used for rendering Markdown on GitHub.
WE1S uses GitHub-Flavored Markdown for all project documents.
Recommended Markdown Tools
- StackEdit (Online Markdown Editor)
- Heck Yes Markdown (Convert web pages to Markdown from URL)
- To-Markdown (Convert HTML to Markdown)
- Pandoc (Swiss Army Knife for Document Conversion)
- Markdown To PDF converter
More tools are available on the workshop website.
Quick Markdown Practice Exercises
- Go to https://stackedit.io/app.
- Click the folder icon at the top left; then the file icon with the plus sign. Enter a name for your Markdown document and hit
- Erase the boilerplate and type your own content. Use the formatting toolbar to introduce formatting and observe the Markdown markup added, as well as how it is rendered in the HTML preview on the right.
- Use the Markdown Cheat Sheet (https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to try adding other types of formatting not included in the toolbar.
- We won’t be using StackEdit’s file saving and export features in this workshop.
- Leave the StackEdit tab open.
- In a new tab, go to the Pandoc demo (https://pandoc.org/try/).
- Copy some Markdown from your StackEdit document into the Pandoc field and convert it from GitHub-Flavored Markdown to HTML. You can copy the rendered HTML and convert it back to Markdown.
- We won’t use other online tools in this workshop, but they work in a similar fashion.
Online tools are for quick jobs. In a realistic working scenario, it is better to author Markdown documents in a code editor.
Markdown in Visual Studio Code
VS Code provides both code linting and HTML preview for Markdown documents.
- Launch VS Code and open a new file if necessary.
- Click Plain Text at the bottom right corner of the screen. Type “Markdown” in the search field and select it. This will tell VS Code which language you are using. Saving the file as
myfile.mdwill also switch the language to Markdown.
- Copy your StackEdit code into your file.
Ctrl+Shift+Vto open a preview. in a new tab. You can view the preview side-by-side (
Ctrl+K V) with the file you are editing and see changes reflected in real-time as you edit.
Using the Linter
- Do you see see squiggly green lines on the screen? Run your mouse over them to see a pop up of the error.
- If you do not see a light bulb, click a squiggly green line to make one appear. Click the lightbulb to see options. Click the options for more information on the error and how to fix it.
Important: some errors indicate that your code is not well-formed according to the Markdown specification. Other errors are stylistic rules established by the author of the linter extension. The latter are subjective. If you want to turn off individual rules, there are instructions in the
markdownlint GitHub repo.
You can use HTML and CSS in Markdown documents to achieves effects not possible in pure Markdown. Whilst this defeats the purpose of Markdown, there are cases when it is worth it.
Try typing the following into VS Code:
How does it display in the preview? Is it acceptable to the linter?
Hard line breaks
A single line break is treated as a space. To force a line break, place two spaces or a “
” at the end of the line.
Try this in VS Code and see what the linting rule is.
**some text** in VS Code. Notice that it renders as some text in the preview?
But what if you want the asterisks?
For this you will need to “escape” them with backslashes. Type the following in VS Code:
Notice the difference? This works with any Markdown formatting character.
In HTML, entity representations like
þ can be used for special characters (both these examples produce þ).
All valid HTML entities are also valid in Markdown.
It is possible to format complex tables in Markdown, but they are challenging to get right. You can use the Markdown Table Generator to help you out. Table-Magic is also useful for converting to and from CSV format.
Large data tables are not recommended for Markdown documents.
Code and Code Blocks
Inline code is normally represented by back ticks (`). For instance,
will display with “syntax highlighting”.
If your code includes back ticks, you can use two back ticks to enclose the code.
Code blocks are represented by three back ticks on the line before and after the code snippet. After the first set of back ticks the name of the coding language should be used, e.g.
Some implementations extend the standard. Two useful extensions used on GitHub are “strikethrough” and “task lists”.
Strikethrough is formatted with two tildes:
~~delete this~~ will render as
Task lists are check boxes:
Task lists are only guaranteed to render on GitHub.
Gotchas and Strategies
You can’t link to an external tab in Markdown. Instead, use inline HTML:
Be careful when using emphasis on links. Placing the formatting markup outside the brackets is well-formed:
It is not possible to control the size or alignment with Markdown. Use inline HTML if this is necessary.
What is GitHub?
git + cloud storage + social media = Octocat
Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files.
The Basic Idea of
- Your local workstation computer has folder that clones a repository (“repo”) on the server.
- You and your collaborators push new versions of your content from your local repository to the remote one after pulling the latest versions from the remote repository.
gitchecks for conflicts in merging content pushed to the repository.
gitkeeps a complete history of the repo, allowing you to roll it back to an earlier state.
GitHub’s 15-minute tryGit tutorial teaches you the command line language but is very good for introducing you to the concepts of
GitHub’s Implementation of
- The remote repository is stored using GitHub’s cloud-based hosting service. Public repositories (which are free) can be cloned by anyone.
- GitHub’s website and desktop client allow you to perform functions using
gitwithout entering commands in
git's archane language.
- GitHub’s website allows you to associate social-media like features with a repository, such as a discussion forum (called “Issues”) and a wiki.
Uses of GitHub
- In less than ten years, GitHub has become the dominant platform for hosting open source code in many languages.
- Although primarily used for programming languages, GitHub is increasingly used for document storage, where the writer wishes to take advantage of
git's version control features. The Programming Historian has a tutorial on using GitHub for academic projects.
- GitHub has also implemented a service called GitHub pages, which allows you to host a website from a GitHub repository. This slideshow is hosted using GitHub pages.
A Quick Tour of GitHub
A repo is like a file system.
Markdown (and some other) files are rendered as HTML. Click the
Raw button to see the actual code.
The raw code can be copied and pasted or saved with your browser’s
Save As function.
You can clone or download repos directly from the GitHub website.
Getting Started with GitHub
A repository (repo) is stored on both the local machine and the remote GitHub server.
Initially, users clone repos on GitHub. Thereafter, they pull the latest code to keep up to date.
Users perform updates to the repo through a three step process:
- They add or modify files in their local folder.
- They commit their changes to “stage” them for sending to the remote repo.
- They push their commits to GitHub.
A repository typically has a Markdown file called
README.md in its root folder. This file describes the content of the repository.
On the GitHub website, the
README.md file is automatically rendered on the repo’s web page.
Ways to Interact with GitHub
gitcommands on the command line. You can do anything, but the
gitlanguage is relatively unintuitive.
- Use the GitHub website. You can perform many, although not all,
gitfunctions that modify the remote repo. You cannot push local changes to the server.
- The GitHub Desktop Client. You can perform many, although not all,
gitfunctions, including pulling from and pushing to the remote repo.
- VS Code. Functions like the GitHub Desktop Client, but you can push and pull from the same environment where you are editing.
Which method do I choose?
Some combination is the most likely scenario. You can make small commits with GitHub’s web editor, but you have to pull the changes to your local repo.
The GitHub Desktop Client is better than VS Code if you are creating or moving around folders, images, PDFs, and so on. VS Code is convenient of you are editing Markdown, HTML, or text files.
Occasionally, you will encounter arcane conflicts which can only be solved by running
git from the command line. It is generally necessary to Google solutions to find the appropriate code. Installing the GitHub client will automatically install
git on your computer.
Setting up the GitHub Desktop Client
- Launch the GitHub Desktop Client.
File > Options > Accountsand login. On the Mac, this is under
GitHub Desktop > Preferences.
- Click the
Gittab and enter the username and email you used for your GitHub account.
- Click the
Advancedtab and select VS Code as your external editor.
- Create a folder called
Documentsfolder. In Windows, this will have the local path
C:UsersYourNameDocumentsGitHub. On the Mac it will be
Cloning a Repo
There are two easy ways to clone a repo.
- With the GitHub Desktop Client open, click the repo’s
Clone or downloadbutton on the GitHub website and select
Open in Desktop.
- Alternatively, copy the URL shown there. In the GitHub Desktop client, select
File > Clone repository > URL. Enter the URL and the local path to your GitHub folder.
Try this with the workshop sandbox repo:
Committing and Pushing Changes
- Open the file
my_name.mdin VS Code.
- Make the changes to the file indicated and save the file as
- Open the GitHub Desktop Client. It should show that you have a new file in the Changes tab. In the Summary section, type a message like “Added your_name.md.” Click
Commit to Master.
- Click the
Push Origintab at the top of the screen. Your file will be pushed to the remote repo.
- Refresh the webpage on GitHub, and your file should appear.
- In the GitHub Desktop Client, click the
Pull Origintab at the top of the screen to update your local repository folder with the latest changes.
- Always pull the latest state of the repo before committing your own changes.
- In VS Code, open the file belonging to the person next to you and add the line “Modified by Your Name”. Save the file.
- Commit and push your change.
Source Control in VS Code
- You can work with GitHub directly from VS Code using its Source Control Management features cryptically hidden in
View > SCM. You can also click the Source Control icon in VS Code's Activity Bar.
- VS Code will show a file hierarchy for each file you have open in one of your local repos.
- Changed files are marked with an “M” (modified). Mouse over the file name and click the Plus icon to stage them for a commit. When all files are staged, type a commit message and click the Check icon.
- Click the Three Dots icon to see all options, one of which will be Push.
- Can also pull the latest code from this menu.
Try the exercise in the file
resolving-merge-conflicts.md in the workshop sandbox.
Branching and Forking
Bitbucket Markdown Html Table
- A repo can have multiple branches. A branch is a copy of the repo at a particular point in time, which can be developed separately from the repo’s master and later merged with it.
- Branches are useful when different collaborators are making extensive changes to a repo, but they are also the most common source of merge conflicts.
- Users can also fork a repo, which clones the repo in the original GitHub account to their own personal GitHub account.
- Both branches and forks may be merged with the (original repo’s) master branch with a pull request. This asks the repo’s owner to approve the merged content. Pull requests may be created on the GitHub website or in the GitHub Desktop Client.
We have only scratched the surface. Here are some useful resources:
Pros and Cons of Using GitHub
- Free public repositories (and private ones with educational accounts)
- Beautiful rendering of Markdown
- Powerful version control and social media-like features aid collaboration
- Wide adoption in the Digital Humanities
- Requires an account from a corporate entity
- More complex than Google Docs, Dropbox, or other collaboration tools
WE1S produces content in the following locations:
- Pages on the WE1S website
- Blog posts on the WE1S website
- Archived materials in the WE1S GitHub repo
Markdown First Principle
Wherever possible, content intended only for website pages and blog posts should be authored offline in Markdown and pasted into the Wordpress text editor (click on the Text tab).
The WE1S website uses the Wordpress Jetpack plugin, which automatically converts Markdown to HTML but saves the original Markdown.
Bitbucket Markdown Html Download
- Encourages simple and consistent formatting across the website.
- Makes it easy to extract content from Wordpress if it is ever needed for presentation on another platform.
Duplicating Wordpress Content on GitHub
Some content should be archived on GitHub. The best workflow is to push the content to GitHub, copy the Markdown from GitHub, and then paste it into the Wordpress text editor. Updates should be performed on GitHub first and the updated content pasted from there into Wordpress.
Non-textual assets (e.g. images) should be archived on GitHub. The urls used to embed these assets in the web pages should point to the files archived on GitHub, not to the Wordpress media library. The reasoning is that GitHub is a more stable repositor than Wordpress’ media library.
Archiving Content on GitHub
In general, documents should be authored in Markdown, if possible, and then converted to other formats (e.g. Word or PDF).
Documents meant to be readable on the GitHub website should be available in Markdown format. Duplicates in other formats can be stored in the same repo.
More complex resources can be stored as a data package with a manifest.
A manifest is a document describing the contents of a repository.
README.md file is a type of manifest.
VS Code stores its settings in JSON-formatted manifest files, and you need to edit them to configure VS Code.
JSON is an easy format in which to make mistakes. If errors occur, try entering your code an the online JSON Linter.
Other Uses of JSON Manifests
- WE1S uses a special manifest schema for storing information about its project and workflow in its database.
- WE1s uses Frictionless Data data packages, which have JSON manifests, for storing content on GitHub.
Structure of a Data Package
- The GitHub repo may contain a standard
- The GitHub repo MUST contain a JSON file called
datapackage.jsonfile MUST contain
The value of the name property should be a short url-usable (and preferably human-readable) name of the package. This MUST be lower-case and contain only alphanumeric characters along with “
_” or “
-” characters. It will function as a unique identifier and MUST be the same as name of its container folder.
A title or one sentence description of the package.
A list of paths to all files associated with the data package. The list is enclosed in square brackets, and each resource is
'path'-value pair enclosed in curly brackets.
Sample Datapackage Manifest
What to Store as a Data Package
See the WE1S Guidelines For Handling Resources.
Slideshow produced by Scott Kleinman
for the WhatEvery1Says Project.