Transforming WeChat Content with Markdown Here

Markdown Here provides a streamlined solution for converting markdown text into visually appealing HTML formatted specifically for WeChat Official Account publications. This approach eliminates manual formatting and ensures consistent styling across articles.

Extension Setup

Install the Markdown Here extnesion from your browser's extension marketplace (available for Chrome, Edge, and Firefox). After installation, access the configuration panel by clicking the extension icon and selecting "Options" to customize the rendering settings.

Configuration and Usage Workflow

The options page contains two primary CSS customization sections that control the visual output: core styling and syntax highlighting. The conversion process follows three simple steps:

1. Compose your markdown content in the preview pane
2. Execute the conversion using the extenison button
3. Copy the rendered output directly into the WeChat Official Account editor

Recommended Style Configuration

Below are optimized CSS configurations for professional WeChat article presentation. These styles address common rendering issues and provide clean, readable formatting.

Core Rendering Styles

.md-here-wrapper {
  /* Root container for markdown conversion */
}

/* URL-specific rules can target the data-md-url attribute */
.md-here-wrapper[data-md-url*="wordpress."] code span {
  font-family: inherit;
}

.md-here-wrapper[data-md-url*="wordpress."] pre {
  background: transparent;
}

/* Paragraph spacing optimized for email clients */
p {
  margin: 0 0 1.4em 0 !important;
  font-size: 16px;
  line-height: 1.6;
}

pre {
  padding: 12px;
  line-height: 1.2;
  box-sizing: border-box;
  background-color: #f7f7f7;
  margin: 0 0 1.4em !important;
  color: #222;
  overflow-x: auto;
  word-wrap: break-word !important;
}

pre code {
  line-height: 1.8;
  white-space: pre;
  font-size: 15px;
  font-family: 'Courier New', monospace;
  background: none;
}

table, dl, blockquote, q, ul, ol {
  margin: 1.1em 0;
}

ul, ol {
  padding-left: 2.2em;
  font-size: 16px;
  padding-bottom: 0.9em;
}

li {
  margin: 0.4em 0;
  font-size: 16px;
}

li code {
  font-size: 16px;
  line-height: 1.8;
  font-family: 'Courier New', monospace;
  color: #d7355c;
  background-color: #fdf2f5;
  padding: 4px 6px;
  max-width: 100% !important;
}

li p {
  margin: 0.4em 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0;
  padding-left: 1.1em;
}

ol ol, ul ol {
  list-style-type: lower-roman;
}

ul ul ol, ul ol ol, ol ul ol, ol ol ol {
  list-style-type: lower-alpha;
}

p code {
  font-size: 16px;
  line-height: 1.8;
  max-width: 100% !important;
  font-family: 'Courier New', monospace;
  color: #d7355c;
  background-color: #fdf2f5;
  padding: 4px 6px;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}

dl dd {
  margin: 0 0 0.9em;
  padding: 0 1.1em;
}

blockquote, q {
  border-left: 3px solid #00a67c;
  background: #f9f9f9;
  color: #444;
  quotes: none;
  line-height: 1.7;
  word-wrap: break-word;
  padding: 18px 0 2px 0;
  margin: 1.4em 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1.2em 0 0.9em;
  padding: 0;
  font-weight: bold;
}

h1 {
  font-size: 21px;
  border-bottom: 1px solid #ccc;
}

h2 {
  font-size: 20px;
  border-bottom: 1px solid #ddd;
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 17px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 16px;
  color: #666;
}

table {
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  border: 0;
}

tbody {
  margin: 0;
  padding: 0;
  border: 0;
}

table tr {
  border: 0;
  border-top: 1px solid #bbb;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr th, table tr td {
  font-size: 16px;
  border: 1px solid #bbb;
  margin: 0;
  padding: 0.6em 1.1em;
}

table tr th {
  font-weight: bold;
  background-color: #f5f5f5;
}

Syntax Highlighting Theme

/*
 * Custom syntax highlighting theme
 */

.code-highlight {
  display: block;
  overflow-x: auto;
  padding: 0.6em;
  color: #586e75;
  -webkit-text-size-adjust: none;
}

.code-comment,
.code-template_comment,
.code-pi,
.code-doctype,
.diff .code-header,
.code-javadoc {
  color: #839496;
  font-style: italic;
}

.code-keyword,
.code-addition,
.method,
.css .rule .code-keyword,
.code-winutils,
.javascript .code-title,
.nginx .code-title,
.code-subst,
.code-request,
.code-status {
  color: #708000;
  font-weight: bold;
}

.code-command,
.code-phpdoc,
.code-tag,
.code-number,
.code-regexp,
.code-string,
.code-hexcolor,
.code-tag .code-value,
.code-rules .code-value,
.tex .code-formula,
.code-link_url,
.ruby .code-constant {
  color: #1e9d8b;
}

.code-dartdoc {
  color: #c41;
}

.code-literal {
  color: #586e75;
}

.code-title,
.code-localvars,
.code-identifier,
.code-chunk,
.code-id,
.code-decorator,
.code-built_in,
.vhdl .code-literal,
.css .code-function,
.scss .code-preprocessor {
  color: #2a7dd2;
  font-weight: bold;
}

.javascript .code-title,
.code-list .code-keyword,
.code-subst {
  font-weight: normal;
}

.tex .code-command {
  color: #3a5a8c;
  font-weight: bold;
}

.code-tag .code-title,
.code-rules .code-property,
.django .code-tag .code-keyword {
  color: #000080;
  font-weight: normal;
}

.code-attribute,
.code-variable,
.code-constant,
.code-class .code-title,
.code-type,
.code-parent,
.haskell .code-type,
.code-link_reference,
.smalltalk .code-number,
.lisp .code-body {
  color: #a67c00;
}

.code-symbol,
.ruby .code-symbol .code-string,
.lisp .code-keyword,
.clojure .code-keyword,
.scheme .code-keyword,
.tex .code-special,
.code-prompt {
  color: #8b0069;
}

.code-preprocessor,
.code-pragma,
.code-shebang,
.code-cdata {
  color: #888;
  font-weight: bold;
}

.code-deletion {
  background: #fee;
}

.diff .code-change {
  background: #007399;
}