tipsarea.com
Open in
urlscan Pro
50.63.209.1
Public Scan
URL:
http://tipsarea.com/2020/08/12/use-vscode-to-write-your-document-and-mindmap-with-markdown/
Submission: On October 23 via manual from SG — Scanned from DE
Submission: On October 23 via manual from SG — Scanned from DE
Form analysis 3 forms found in the DOM
<form id="commentform" class="comment-form">
<iframe title="Comment Form"
src="https://jetpack.wordpress.com/jetpack-comment/?blogid=44459554&postid=111002&comment_registration=0&require_name_email=0&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=gravatar_default&greeting=Please+tell+us+what%27s+in+your+mind+...&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=8.9.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=f5a250dbeead1697b9d24fb4e390a9fd1dec2e4a#parent=http%3A%2F%2Ftipsarea.com%2F2020%2F08%2F12%2Fuse-vscode-to-write-your-document-and-mindmap-with-markdown%2F"
style="width: 100%; height: 58px; border: 0px;" name="jetpack_remote_comment" class="jetpack_remote_comment" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups"
scrolling="no"></iframe>
<!--[if !IE]><!-->
<script>
document.addEventListener('DOMContentLoaded', function() {
var commentForms = document.getElementsByClassName('jetpack_remote_comment');
for (var i = 0; i < commentForms.length; i++) {
commentForms[i].allowTransparency = false;
commentForms[i].scrolling = 'no';
}
});
</script>
<!--<![endif]-->
</form>POST #
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
<div id="subscribe-text">
<p>Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p>
</div>
<p id="subscribe-email">
<label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-blog_subscription-2"> Email Address </label>
<input type="email" name="email" required="required" value="" id="subscribe-field-blog_subscription-2" placeholder="Email Address">
</p>
<p id="subscribe-submit">
<input type="hidden" name="action" value="subscribe">
<input type="hidden" name="source" value="http://tipsarea.com/2020/08/12/use-vscode-to-write-your-document-and-mindmap-with-markdown/">
<input type="hidden" name="sub-type" value="widget">
<input type="hidden" name="redirect_fragment" value="blog_subscription-2">
<button type="submit" name="jetpack_subscriptions_widget"> Subscribe </button>
</p>
</form>http://www.google.com
<form action="http://www.google.com" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-9612501904934161:8785099071">
<input type="hidden" name="ie" value="UTF-8">
<input type="text" name="q" size="40" placeholder="" style="background: url("https://www.google.com/cse/static/images/1x/en/branding.png") left 9px top 50% no-repeat rgb(255, 255, 255);">
<input type="submit" name="sa" value="Search">
</div>
<input name="siteurl" value="tipsarea.com/2020/08/12/use-vscode-to-write-your-document-and-mindmap-with-markdown/" type="hidden"><input name="ref" value="" type="hidden"><input name="ss" value="" type="hidden">
</form>Text Content
Warning: Cannot modify header information - headers already sent by (output
started at /home/content/69/10234069/html/index.php:2) in
/home/content/69/10234069/html/wp-content/plugins/wp-super-cache/wp-cache-phase2.php
on line 1338
Use VSCode to write your document and MindMap with MarkDown – Tips Area
Skip to content
TIPS AREA
Useful Tips and Tricks for Technology, Finance and Life
Menu
* Contact Us
USE VSCODE TO WRITE YOUR DOCUMENT AND MINDMAP WITH MARKDOWN
VSCode, Mindmap and MarkDown are 3 of the useful tool that I used frequently.
You might have used multiple of them as well.
* Use VSCode to program and edit files
* Use MindMap to organize your thoughts and generate ideas
* Use Markdown to create documents
But recently I am thinking of more of creating the MindMap and document with the
same MarkDown (MD) file. It would save quite a bit of effort and would be
interesting to see things from different angles. I am going to show you how.
INSTALL VSCODE
Why VSCode?
* Why VSCode?
* Cross platform
* Rich Feature
* Extendable with extensions
* Free
* Download: [https://code.visualstudio.com/Download]
* Install Extensions
* Select “Extensions” on the left
* CTRL + SHIFT + X–
ENABLE MARKDOWN EXTENSIONS
ENABLE MARKDOWN PREVIEW
If you only want to do simple Markdown edit and preview, then “Markdown All in
One” is pretty much all you want. You can edit text, add equation, preview
outcome and even print to HTML files. It also has the auto complete function to
make you edit more easier. But if you would like to do more, then the next few
sections are for you.
ENABLE DEDICATED MARKDOWN MATH EQUATION EDITING (LATEX STYLE)
If you would like to use more sophisticated Math equation, then the
“Markdown + Math” extension is what you need. You would need to
isable math.enabled option of Markdown All in One extension to use it.
ENABLE MARKDOWN LINTING AND STYLE CHECK
The markdownlint extension can be your grace saver when it comes to style, it
also provide hint on how to fix things and enforce good style through out the
document.
ENABLE MARKDOWN EXPORT (PDF/HTML/JPG/PNG)
As usual, there is an extension that can do it for you: “Markdown PDF“. By
default, it could not render math equation. Here is how you could configure it.
ENABLE RENDERING OF MATH EQUATION USING MATHJAX
Step 1:
Open “C:\Users\user\.vscode\extensions\yzane.markdown-pdf-1.4.4\template\template.html”
Step 2: Add the following 2 lines of code to the end of the file
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath:
[['$', '$']]}, messageStyle: "none" });</script>
1
2
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath:
[['$', '$']]}, messageStyle: "none" });</script>
ENABLE GENERATING MINDMAP
Install and run markmap-lib
To generate the MindMap, I choose to use a Node.js base application
“markmap-lib“. After installation, the generation can be done with command line.
You can download my MD version of this post (vscode_markdown_mindmap.md) to test
out.
markmap --enable-mathjax --no-open vscode_markdown_mindmap.md
1
2
markmap --enable-mathjax --no-open vscode_markdown_mindmap.md
The outcome HTML looks like this
What is Included in the MindMap?
The items that are added to the mindmap includes most of the hierarchical items:
* Headings (hierarchical)
* Numbered List
* Unordered List
* The List items also could include separate equations (not the embedded ones)
What is NOT Included in the MindMap?
Normal text and comments in the Markdown file are not included in the created
MindMap. The comments are also not included in the PDF exports.
In case you don’t know how to include the comments in the Markdown. Here is a
short example:
<!-- This is the comment area won't show in the exported document. If you like
the content of this post, please refer to tipsarea.com -->
1
2
3
4
<!--
This is the comment area won't show in the exported document.
If you like the content of this post, please refer to tipsarea.com
-->
This is all you need to do to use Markdown to generate your document and
MindMap.
Please let us know if it works well for you too.
Use VSCode to write your document and MindMap with MarkDown
SHARE:
*
*
* Share
*
* WhatsApp
*
LIKE THIS:
Like Loading...
RELATED
Where should I Self-publish My BookOctober 12, 2014In "Money"
The VI Tricks that I likeJanuary 31, 2013In "Technology"
Install Ubuntu with Virtual Machine in computer with Windows 8January 1, 2013In
"Technology"
TipsArea August 12, 2020August 28, 2020 Technology No Comments
* ← Reclaim the Disk Space When You Use Visual Studio Code
* How to Enable OpenMP for Mex Function in Matlab →
PLEASE TELL US WHAT'S IN YOUR MIND ... CANCEL REPLY
SPONSORED LINKS
POPULAR POSTS
* How to Turn Off the “Maint Reqd” Light… The car manufacturers are trying to
make it easy for…
* How to Fix “The application was unable to… Today my kids told me that the
Office software is…
* How To Fix the Crashing Windows Explorer in Windows 10 My wife's laptop
started to have the problem that Windows…
* How to Program Toyota OEM Remote Keyless Entry Replace your remote keyless
entry at dealership could easily cost…
* How to Get Foreign Visitors Tax Refund in United State If you are traveling
around the world, you might be…
* How to Drive Legally in Texas with Visitor Visa (B1/B2)? Many visitors to US
have the need to drive on…
* Watch Chinese online movie/TV on your IPAD or IPhone… My mother-in-law
recently came to visit us from China. One…
* Install Map Updates On Old Garmin GPS Nuvi 360 I was cleaning up my closet
and found an old…
* How to Clean Up WeChat Data in Android I am using WeChat to catch up with my
friends…
* How Shoud You Use Baidu Cloud Service Baidu is the biggest search engine in
China. It also…
EMAIL SUBSCRIBE
Enter your email address to subscribe to this blog and receive notifications of
new posts by email.
Email Address
Subscribe
RECENT POSTS
* How to Enable OpenMP for Mex Function in Matlab
* Use VSCode to write your document and MindMap with MarkDown
* Reclaim the Disk Space When You Use Visual Studio Code
* How to Fix Few Issues when compiling Qt 5.13 for Android
* Best Way to Run Ubuntu X Applications on Windows 10
* How to Fix Spyder Keyboard Issue in VNC Session
* How to Transfer Video files from Android Phone to PC
* How to Clean Up WeChat Data in Android
* How To Input Math Equation Using Shortcut Key in PowerPoint
* How to Cross Compile OpenCV 3.2.0 to ARM processor
RECENT COMMENTS
* Anonymous on How to Turn Off the “Maint Reqd” Light on Toyota in 5 seconds
* Victoria Tegg on How to Add Google Page-Level Ads to your WordPress Site
* Anonymous on How to Turn Off the “Maint Reqd” Light on Toyota in 5 seconds
* Kimberley Nando on How to Clean Up WeChat Data in Android
* Anonymous on How to Clean Up WeChat Data in Android
RECOMMENDED SITES
Best Cake in North Texas: Fanny's Favorite
FOLLOW ME ON TWITTER
My Tweets
SEARCH
ARCHIVES
* August 2020
* July 2020
* September 2019
* November 2018
* April 2018
* January 2018
* October 2017
* June 2017
* April 2017
* March 2017
* February 2017
* January 2017
* April 2016
* February 2016
* January 2016
* December 2015
* November 2015
* October 2015
* August 2015
* July 2015
* June 2015
* May 2015
* April 2015
* March 2015
* February 2015
* January 2015
* November 2014
* October 2014
* September 2014
* August 2014
* June 2014
* May 2014
* April 2014
* March 2014
* December 2013
* November 2013
* October 2013
* August 2013
* July 2013
* May 2013
* April 2013
* March 2013
* January 2013
* December 2012
CATEGORIES
* Business
* Car
* Health
* Money
* Parent
* sport
* Technology
* Thoughts
* Timeline
* Travel
* Uncategorized
TAGS
ads adsense amazon Android book car chrome credit card ebook FileZilla FPGA FTP
host ios ipad iphone kindle Lamp Linux Matlab microsoft money ping pong plugin
port Python Safety server share Ski social software table tennis tax travel
ubuntu unblock youku unix video virtual machine website widget windows Windows 8
wordpress
META
* Log in
* Entries feed
* Comments feed
* WordPress.org
Copyright © 2021 Tips Area. Powered by WordPress. Theme: Spacious by ThemeGrill.
%d bloggers like this: