MDJS:可将 JavaScript 添加到 Markdown,创建交互式文档
云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!
Open Web Components( @OpenWc )创建者 Thomas Allmer 发布了 MDJS ,这是一种 Markdown 变体,支持在 Markdown 文档中包含可运行的 JavaScript 代码。MDJS 可以解释为常规的 Markdown 内容,也可以进一步升级为带有为 Web 组件的交互式文档。
MDJS 通过三个新结构增强了 Markdown 的代码块语法:script、story、preview-story。
以下 Markdown 源代码:
```js script import './my-component.js'; ``` # This is my component <my-component></my-component>
将生成下面的 JavaScript 和 HTML 代码:
import './my-component.js'; <h1>This is my component</h1> <my-component></my-component>
js代码块的script注解允许开发人员加载 Web 组件并在 Markdown 源代码中使用它。
第二个注解 story 用法如下:
```js script import './demo-wc-card.js'; import { html } from 'lit-html'; ``` # This is my component ```js story export const demo = () => html` <demo-wc-card header="HEADER"></demo-wc-card> `; ```
可编辑演示文档链接
上例中嵌入的 JavaScript 包含一个工厂函数,使用 lit-html 模板来生成 HTML。以上代码将生成以下 JavaScript 和 HTML:
import './demo-wc-card.js'; import { html } from 'lit-html'; export const demo = () => html` <demo-wc-card></demo-wc-card> `; <h1>This is my component</h1> <mdjs-story mdjs-story-name="demo"> #shadow-root (open) <demo-wc-card></demo-wc-card> </mdjs-story>
可编辑演示文档链接
Web 组件是由 MDJS 提供的,它封装了用户提供的 Web 组件。preview-story 添加了与 story 类似的功能,不过组件会有边框,还会有一个按钮,用来显示 / 隐藏实际的源代码。
MDJS 读起来像标准的 Markdown,不需要修改就可以在 MDJS 上下文或场景之外使用。代码块将正常显示代码。不过,MDJS 增强了标准的 Markdown 行为(通过加载的 Web 组件所提供的额外交互性)和源代码预览功能。这样,开发人员就可以使用 Markdown、JavaScript 和 Web 组件创建交互式演示文档。举例来说,开发人员可以用它记录基于 Web 组件的系统设计过程。
到目前为止,MDJS 既可以通过 es-dev-server 在本地使用,也可以通过 Storybook 使用,还可以在 GitHub 页面(例如 README 页面或问题页面)或在 webcomponents.dev IDE 中使用。
Allmer 将 MDJS 的用例总结如下:
MDJS 是一种可以以多种不同的方式显示的格式。
让漂亮的文档随处可见。
在本地、已发布的 Storybook、GitHub 或 npmjs 上,即使没有直接的支持,也没有问题,只要可能,它就可升级为交互式演示文档。
MDJS 提供了与 MDX 类似的功能,后者在 Markdown 中包含了 JSX 。JSX 是为了与 React 生态系统进行交互而开发的,而 MDJS 依赖于已在大多数浏览器中实现的标准 JavaScript 和 Web 组件。此外,MDJS 源代码可以在任何地方使用。
MDJS 的路线图包括改进样式,支持更多的渲染器,而不仅仅是 litt -html,高亮显示代码段,等等。开发人员可以点击这里查看官方文档。
【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间:2020-04-27
本文作者:Bruno Couriol
本文来自:“InfoQ”,了解相关信息可以关注“InfoQ”
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
大哥你JavaScript可能不太需要switch
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 无"switch" 不欢 Java的大佬非常喜欢switch,JavaScript开发人员也是如此。老实说,我们的开发人员很懒惰,对于像我这样缺乏创造力的人来说,很容易坚持现状。 switch很方便:给定一个表达式,我们可以检查它是否与一堆case子句中的其他项匹配。考虑以下示例: 当名称为Juliana时,我们将打印一条消息,并立即通过退出break。当switch在函数内部时break,只要您从每个子句返回,就可以省略。当没有匹配项时,您还可以具有默认分支: switch 在 Redux reducers 当中大量使用,通过 Redux Toolkit 简化了样板,避免了一大坨 if 语句 还不错,没什么问题,但是我们还能有更好的选择么? 借鉴Python 来自Telmo的这条推文引起了我的注意。他展示了两种“切换”样式,其中一种非常接近Python中的相似模式。 Python没有switch,它可以教我们一个更好的替代方法,以取代我们钟爱的混乱switch。首先让我们将代码从Jav...
- 下一篇
重启大法好!线上常见问题排查手册
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 阿里妹导读:本文从线上实际问题和故障的排查出发,分享如何快速定位和恢复线上常见问题和故障,总结了很多实操的方法,希望对大家有用。 一 线上常见问题定位 常见问题 1:CPU 利用率高 CPU 使用率是衡量系统繁忙程度的重要指标,一般情况下单纯的 CPU 高并没有问题,它代表系统正在不断的处理我们的任务,但是如果 CPU 过高,导致任务处理不过来,从而引起 load 高,这个是非常危险需要关注的。 CPU 使用率的安全值没有一个标准值,取决于你的系统是计算密集型还是 IO 密集型,一般计算密集型应用 CPU 使用率偏高 load 偏低,IO 密集型相反。 问题原因及定位: 1 频繁 FullGC/YongGC 查看 gc 日志 jstat -gcutil pid 查看内存使用和 gc 情况 2 代码消耗,如死循环,md5 等内存态操作 1)arthas (已开源:https://github.com/alibaba/arthas) thread -n 5 查看 CPU 使用率最高的前 5 ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker快速安装Oracle11G,搭建oracle11g学习环境