npm 是一个javascript的包管理器，许多前端工具都可以通过 npm 来管理安装。而 npm 包 write-up 则是一个非常方便的用于页面排版的工具包。本文将介绍学习 write-up 的基本方法，以及如何使用它来排版页面。
安装
你可以在本地或全局安装 write-up。在本地安装的好处是可以在项目目录中使用 write-up；而全局安装的好处是可以在任何地方使用 write-up。
本地安装：
npm i write-up
全局安装：
npm i -g write-up
使用
基本用法
在使用 write-up 时，你需要在页面中引入 write-up.css 文件，并将你的排版内容写在 <div class='write-up'></div> 中。
-- -------------------- ---- -------
------
----- ---------------- -------------------------------------------
-------
------
---- -----------------
------ -------- --------
----- -------- -------
------
-------标题
write-up 的标题有多种样式可供选择:
- h1、h2、h3等标题。
<h1>write-up 的 h1 标题</h1> <h2>write-up 的 h2 标题</h2> <h3>write-up 的 h3 标题</h3> <h4>write-up 的 h4 标题</h4>
- 主副标题（灰色背景）。
<div class="write-up-title-main">这是 write-up 的主标题</div> <div class="write-up-title-sub">这是 write-up 的副标题</div>
文本和样式
write-up 还包含了基本的文本和样式，包括粗体、斜体、强调、缩进、引用等等。
-- -------------------- ---- ------- -- -------------------- -------- ------- -- ---------------------- -------- ------- -- ---------------------- -------- ------- -- ---------------------- -------- ------- ------------ ----- -------- ------- -------------
列表
write-up 支持有序列表和无序列表，你可以根据需求进行选择。
-- -------------------- ---- ------- ---- ------ -------- ----------- ------ -------- ----------- ------ -------- ----------- ----- ---- ------ -------- ----------- ------ -------- ----------- ------ -------- ----------- -----
表格
如果你需要添加表格到 write-up 中，可以使用 write-up 的 table 表格样式。
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
------------
-----
----
-----------
-----------
------------
-----
----
-----------
-----------
-----------
-----
--------
--------图片
write-up 支持添加图片，并且可以自定义图片的大小和位置。
<img class="img-responsive" src="image.jpg" alt="write-up 图片" width="400">
段落
在 write-up 中，你可以添加不同样式的段落，包括左对齐、右对齐、居中对齐。
<p class="text-left">这是 write-up 的左对齐段落</p> <p class="text-right">这是 write-up 的右对齐段落</p> <p class="text-center">这是 write-up 的居中对齐段落</p>
连接
你可以在 write-up 中添加链接，包括内部链接和外部链接。
<a href="https://www.google.com">外部链接</a> <a href="/about">内部链接</a>
结语
通过本文的介绍，你已经学会了如何使用 write-up 的基本用法和一些高级功能。write-up 可以帮助你更快更方便地进行页面排版，让你的页面更加美观和易读。希望本文能对你有所帮助，这是示例代码，你可以在自己的项目中进行实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe548