Giter Site home page Giter Site logo

madmaxchow / vlook Goto Github PK

View Code? Open in Web Editor NEW
1.2K 15.0 124.0 203.37 MB

Easy To Use Practical Typora / Markdown Theme Package and Enhancement Plug-in

Home Page: https://madmaxchow.github.io/VLOOK/index.html

License: MIT License

Less 74.79% JavaScript 25.08% Shell 0.13%
markdown typora

vlook's Introduction

Select language ❯ 🔠 English


VLOOK™ ── 让你的 Markdown 有了新看(wán)法

好用实用的 Typora/Markdown 主题包 与 增强插件

VLOOK™

OSCHINA (开源**)Gitee (码云) 推荐的国产开源项目。

VLOOK™ 是针对 Typora(跨平台 Markdown 编辑器)的 主题包增强插件

VLOOK™ 属于开源软件,遵从 MIT 许可证

加入讨论:

打赏

若喜欢 VLOOK™ 的话,可以贡献一杯咖啡 :-) If you like VLOOK™, you can contribute a cup of coffee :-)
打赏 VLOOK™ 打赏 VLOOK™

感谢打赏支持 VLOOK™ 的客官(部分名单)/ Thanks for donate VLOOK™ (partial donors)

*丽、一*秋、*军、*鹏、李*6、*无、H*t、*二、f*y、*宇、*琛、*辉、*秋、*笑、*豫、l*a、*心、整*9、*国、*拉、*龙、*应、*销、*哦、E*y、……


VLOOK™ ── 让你的 Markdown 有了新看(wán)法

让你的 Markdown 文档在自动化排版、可交互性上了 N 个台阶

内置多套原创文档主题 & 字体主题,一键切换!支持定制!

图片排版 plus:题注、高清屏、版式、Dark 模式适配反色/替换…

表格排版 plus:单元格合并、列格式、行分组、重复表头、自动编号…

索引、逐章、逐段三种导航模式,插图/表格/媒体/代码分类索引与搜索

火力全开的演示辅助~画中画、聚光灯、激光笔、表格十字光标、刮刮卡…

还有音频、视频、标签、引用块折叠、高清插图、…30+特性等你开箱即用


简介

进一步了解 VLOOK™,点击这里开始备用链接


安装与使用

只需三步,即可开启全新的 Markdown 体验,点击这里开始备用链接


专题文章

入选「知乎 • 海盐计划」的专题文章

入选「知乎 • 海盐计划」的专题文章 •• 点击前往看看


范例参考

点击查看实际效果 点击查看实际效果 点击查看实际效果 点击查看实际效果 点击查看实际效果 点击查看实际效果


快速参考手册

VLOOK™ 通过持续挖掘和扩展 Markdown 和 CSS,并结合文档的互联网化应用场景,在 文档排版内容导航演示辅助交互体验 等方面提供了 一致简洁友好 的体验。

定制主题

目前现已开放主题的「定制服务」,以下为部分定制案例参考。

定制主题

更多定制主题展示 •• 点击这里去探索


字体主题

模板主题让文档颜值倍增,而字体则是文档气质担当!

VLOOK™ 提供了两套字体风格,可根据个人喜好进行选用。

小•清•新

整体视觉为「清新、简约、明快」,主要采用无衬线的免费或开源的东亚和拉丁字体。

字体风格_小清新

文•艺•范

整体视觉为「优雅、韵动、个性」,主要采用衬线、无衬线的免费或开源的东亚和拉丁字体,多种字重进行混搭组合

字体风格_文艺范

因为 Windows / MacOS 系统默认不预装字体主题配套的字体包,VLOOK™ 目前可同时支持在线和本地两种使用方式。 若你的工作环境无法访问互联网,建议直接下载字体包并安装到本地,以获得最佳的视觉体验。

蓝奏云 •• 下载字体 ▾

百度网盘 •• 下载字体 ▾(提取码 11ta)


目录/文件说明

目录/文件 说明
[ docs ] VLOOK™ 快速参考手册、官网及在线服务相关文件
[ released ] 发布版本的主目录
   ┠─ [ docs ] VLOOK™ 快速参考手册 markdown 源文件
   ┠─ [ themes ] 默认配套的主题文件
   ┠─ [ samples ] 推荐的各种 Markdown 范例文档
   ┖─ [ plugin ] 插件主目录
        ┠─ meta.txt Typora 导出 HTML 配置「在 <head /> 中添加」的内容
        ┠─ plugin_live.txt 在线版本的插件
        ┖─ plugin.txt Typora 导出 HTML 配置「在 <body /> 中添加」的内容
[ src ] 源码目录
   ┠─ [ dev ] 开发测试用文件
   ┠─ [ less ] 主题 CSS 文件的源文件
   ┖─ [ logo ] VLOOK™ 的 logo 资源

vlook's People

Contributors

asterecho avatar madmaxchow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vlook's Issues

markdown转html后无法出现大纲导航

md转换成html,并且加上TOOLBOX插件内容后,html没有导航栏。我看到说明书上有这么一句:
编写 Markdown 文档时,须在封面后添加标签[TOC]。
请问,这个[TOC]标签是加在哪里呢?

主题配色支持CSS的「::selection」

不同时间使用指定的选中文本颜色、背景色,以使视觉效果更协调。

::selection {
    background:#d3d3d3; 
    color:#555;
}

::-moz-selection {
    background:#d3d3d3; 
    color:#555;
}

::-webkit-selection {
    background:#d3d3d3; 
    color:#555;
}

支持更多字体样式选项

在现有的衬线(思源宋体)、非衬线(思源黑体)的两种字体样式选择的基础上,增加更多的字体样式选项。
计划增加:经典黑/宋、微软雅黑、阿里巴巴普惠体、圆体

文档透视(X-ray)特性

类似 Kindle 的 X-ray 特性,在 VLOOK 中主要将带题注的内容(插图、表格)同、多彩标签、引用等

使用无效

按照教程里做了,但是显示空白,有报错。。请问怎么解决啊?

image

image

移动端问题汇总

  • 文档大纲视图及版本信息未适配移动端屏幕宽度
  • 不应显示工具提示
  • 应屏蔽的入口:聚光灯、Light/Dark模式、字体样式、打印

界面交互适配问题合集

  • 调整浏览器窗口大小,或最大化,VLOOK的UI没有适配
  • 插图、表格的新标签打开按钮背景颜色丢失
  • 优化默认字体样式、最后设置样式的处理
  • 未缩进情况下表格行号位置过于贴近表格
  • 优化表格十字光标、内容块聚焦的交互
  • 表格前序号失效
  • 提示层外增加背景模糊(仅Chrome, Safari)
  • 大纲折叠节点样式的hover无效
  • 页面初始化后 Windows 下右侧工具栏位置不应贴边,应有间距20px

支持对指定图片在DarkMode时进行反转

markdown图片语法中的「图片地址」中增加URL参数的方式实现指定:
![图片替代文本](图片地址 "标题")

通过URL参数invert=in-dark指定图片在 Dark Mode 时反转。
举例如下:
![正常图片替代文本](xxx.png?invert=in-dark")

注意:URL参数与图片地址间以英文问号「?」分隔

性能优化

针对加载,页面滚动等情况进行性能优化

优化代码块在 Dark Mode 的样式

参考 Typora 的内置主题「night」相关主题文件:
night.css
night\codeblock.dark.css
night\sourcemode.dark.css

调整样式一致性,增加交互

适配支持mermaid v8.4

涉及新图形:类图状态图饼图
适配所有图表的样式(颜色、字体等),包括 Light / Dark 模式,更新mermaid的补丁

PS: 对应的 Typora 版本为 0.9.9.30 (0.9.80)
目前因 mermaid 自身 bug 的原因,VLOOK 与 Typora 对其属于初步支持的程度

MathJax formula is so small in the PDF output

MathJax formula is so small in the PDF output.
My Typora version is 0.9.77. Windows 10.
The formula in Typora is as follows. It is in the normal size.
uHl8PS.jpg
The formula in the PDF output is as follows. It is so small.
uHlB5T.jpg

Thank you for the plugin. It is a helpful project!

适配 Typora 的 Dark 模式

在系统和 Typora 启用 Dark 模式后,选择 VLOOK 的主题能自动进行适配
(前提条件:Typora 须先支持 CSS 的 prefers-color-scheme,目前未支持)

图注、表注优化与增强

  • 增强图片现有的图注功能,在「alt 转为图注」的基础上,增加「title转为图注二」,应用于如「数据来源:xxx」等场景(同时也要支持在新标签打开)。
  • mermaid的图注、表格的表注支持第二图注/表注,并须使用扩展语法![图注/表注]"图注/表注二",可在其前置的正文或h6中应用,该内容会在VLOOK插件生成图注/表注后被隐藏。
  • 图片若存在前置的以上扩展语法,则以其为优先,覆盖第1点中针对图片的对应图注内容。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.