Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.

Overview

logseq-plugin-wrap

创建自定义文字包围及快捷键,默认提供了一组实用的配置。

Create your own wrappings with optional key bindings for selected text, a set of useful defaults is also provided.

使用展示 (Usage)

demo

用户配置 (User configs)

" }, "wrap-red-hl": { "label": "Wrap with red highlight", "binding": "mod+shift+r", "template": "[[#red]]==$^==", "icon": " " }, "wrap-green-hl": { "label": "Wrap with green highlight", "binding": "mod+shift+g", "template": "[[#green]]==$^==", "icon": " " }, "wrap-blue-hl": { "label": "Wrap with blue highlight", "binding": "mod+shift+b", "template": "[[#blue]]==$^==", "icon": " " }, "wrap-red-text": { "label": "Wrap with red text", "binding": "", "template": "[[$red]]==$^==", "icon": " " }, "wrap-green-text": { "label": "Wrap with green text", "binding": "", "template": "[[$green]]==$^==", "icon": " " }, "wrap-blue-text": { "label": "Wrap with blue text", "binding": "", "template": "[[$blue]]==$^==", "icon": " " } }">
{
  "disabled": false,
  "toolbar": true,
  "wrap-cloze": {
    "label": "Wrap with cloze",
    "binding": "mod+shift+e",
    "template": "{{cloze $^}}",
    "icon": "
   
    \"
   1643261888324\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5478\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"200\" height=\"200\">
   
  
   \"M341.333333 396.8V320H170.666667v384h170.666666v-76.8H256V396.8zM682.666667 396.8V320h170.666666v384h-170.666666v-76.8h85.333333V396.8zM535.04 533.333333h40.96v-42.666666h-40.96V203.093333l92.16-24.746666-11.093333-40.96-102.4 27.306666-102.4-27.306666-11.093334 40.96 92.16 24.746666v287.573334H448v42.666666h44.373333v287.573334l-92.16 24.746666 11.093334 40.96 102.4-27.306666 102.4 27.306666 11.093333-40.96-92.16-24.746666z
   \" p-id=
   \"5479
   \" fill=
   \"#eeeeee
   \">
  "
  },
  "wrap-red-hl": {
    "label": "Wrap with red highlight",
    "binding": "mod+shift+r",
    "template": "[[#red]]==$^==",
    "icon": "
  
   
    
   
  "
  },
  "wrap-green-hl": {
    "label": "Wrap with green highlight",
    "binding": "mod+shift+g",
    "template": "[[#green]]==$^==",
    "icon": "
  
   
    
   
  "
  },
  "wrap-blue-hl": {
    "label": "Wrap with blue highlight",
    "binding": "mod+shift+b",
    "template": "[[#blue]]==$^==",
    "icon": "
  
   
    
   
  "
  },
  "wrap-red-text": {
    "label": "Wrap with red text",
    "binding": "",
    "template": "[[$red]]==$^==",
    "icon": "
   
    \"
   1643270432116\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12761\" width=\"200\" height=\"200\">
   \"M256 768h512a85.333333 85.333333 0 0 1 85.333333 85.333333v42.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-42.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 85.333333v42.666667h512v-42.666667H256z m401.578667-341.333333H366.421333L298.666667 682.666667H213.333333l256.128-640H554.666667l256 640h-85.333334l-67.754666-170.666667z m-33.877334-85.333333L512 145.365333 400.298667 426.666667h223.402666z
   \" p-id=
   \"12762
   \" fill=
   \"#f00
   \">
  "
  },
  "wrap-green-text": {
    "label": "Wrap with green text",
    "binding": "",
    "template": "[[$green]]==$^==",
    "icon": "
   
    \"
   1643270432116\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12761\" width=\"200\" height=\"200\">
   \"M256 768h512a85.333333 85.333333 0 0 1 85.333333 85.333333v42.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-42.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 85.333333v42.666667h512v-42.666667H256z m401.578667-341.333333H366.421333L298.666667 682.666667H213.333333l256.128-640H554.666667l256 640h-85.333334l-67.754666-170.666667z m-33.877334-85.333333L512 145.365333 400.298667 426.666667h223.402666z
   \" p-id=
   \"12762
   \" fill=
   \"#0f0
   \">
  "
  },
  "wrap-blue-text": {
    "label": "Wrap with blue text",
    "binding": "",
    "template": "[[$blue]]==$^==",
    "icon": "
   
    \"
   1643270432116\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12761\" width=\"200\" height=\"200\">
   \"M256 768h512a85.333333 85.333333 0 0 1 85.333333 85.333333v42.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-42.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 85.333333v42.666667h512v-42.666667H256z m401.578667-341.333333H366.421333L298.666667 682.666667H213.333333l256.128-640H554.666667l256 640h-85.333334l-67.754666-170.666667z m-33.877334-85.333333L512 145.365333 400.298667 426.666667h223.402666z
   \" p-id=
   \"12762
   \" fill=
   \"#00beff
   \">
  "
  }
}

在 Logseq 的插件页面打开插件的配置后,有以下几项配置可供使用,请参照上方代码块进行设置(各项的默认值以体现在代码块中):

  • toolbar: 不想用工具栏可以设置为false
  • wrap-*: 自定义的文字包围都定义在这里。你可以扩展默认提供的这些规则,也可以移除或替换你不需要的规则。配置方法请参考上面的示例,binding不能出现重复。template是你包围文字的模板,里面的$^代表原本被选中的文字。

There are a couple of user settings available when you access the plugin settings from Logseq's plugins page. Please refer to the source block above (Default values are given in the source block).

  • toolbar: You can set it to false if you don't want to use the toolbar.
  • wrap-*: Your custom wrappings are defined here. You can extend default wrappings and/or replace/remove them. Please refer to the above configuration for how to define wrappings, binding should be unique, template defines how you want the selected text to be wrapped, $^ represents the selected text.

自定义工具栏样式 (Toolbar style customization)

请参看下方示例:

Please refer to the following example:

/* 这里更改工具栏本身的样式 */
/* Here goes styles for the toolbar itself */
#kef-wrap-toolbar {
  background: #333;
}

/* 这里是工具栏上按钮的样式 */
/* Here goes styles for toolbar buttons */
.kef-wrap-tb-item {
}

/* 这里是工具栏上按钮在有鼠标悬浮时的样式 */
/* Here goes styles for toolbar buttons when hovered */
.kef-wrap-tb-item:hover {
  filter: drop-shadow(0 0 3px #fff);
}

/* 这里可以定义svg图标的样式 */
/* Here you can define styles for the svg icon */
.kef-wrap-tb-item svg {
  fill: #eee;
}

内置高亮与文字色的样式如下:

Builtin styles for highlight and text color is as follows:

span[data-ref="#red"],
span[data-ref="#green"],
span[data-ref="#blue"],
span[data-ref="$red"],
span[data-ref="$green"],
span[data-ref="$blue"] {
  display: none;
}
span[data-ref="#red"] + mark {
  background: #ffc7c7;
}
span[data-ref="#green"] + mark {
  background: #ccffc1;
}
span[data-ref="#blue"] + mark {
  background: #abdfff;
}
span[data-ref="$red"] + mark {
  color: #f00;
  background: unset;
  padding: 0;
  border-radius: 0;
}
span[data-ref="$green"] + mark {
  color: #0f0;
  background: unset;
  padding: 0;
  border-radius: 0;
}
span[data-ref="$blue"] + mark {
  color: #00f;
  background: unset;
  padding: 0;
  border-radius: 0;
}
Comments
  • Can you add Kindle highlight colors as a option?

    Can you add Kindle highlight colors as a option?

    Could you make a code block available in the readme for those who want to implement the Kindle highlights color palette in the plugin? I tried to change the colors but I didn't succeed, I was only able to change the icon color and their order, not the highlights color itself.

    Thx, for the plugin!

    opened by Pvazevedo 9
  • 建议:增强插件样式的覆盖能力

    建议:增强插件样式的覆盖能力

    目前的夜间模式下样式覆盖能力不足,导致与部分主题冲突。对于插件的默认样式,个人有一些小建议

    1. 此插件样式优先级应当高于所有主题,但目前使用的选择器过于简单容易被主题覆盖。可以考虑嵌套或 important 以提高优先级。尽管important 是非常侵入式的写法,但此插件的样式应当不会再希望被其他插件所覆盖。
    2. 提高插件样式的完整性。比如浅色背景高亮时,需要同时将设置字体颜色为黑色。目前在夜间模式下,如 logseq-dev-theme 字体颜色为白色,和此插件的高亮浅色背景搭配难以阅读。
    3. 字体色彩明度差异过大,建议统一文字明度。目前 green 文字在亮色模式下与背景对比度不足,导致阅读困难,而 blue 文字在暗色模式下阅读困难。
    4. 需要适配 dark mode。一是样式覆盖能力的问题,目前只要是主题修改过 dark mode 的高亮均会覆盖插件的样式写法。二是暗色模式下的高亮颜色设计需要与亮色模式下的高亮有不同的考虑。

    该问题来自logseq-bonofix-theme issue

    最后,感谢您写出方便好用的高亮插件~

    opened by Sansui233 7
  • can't open its settings or disable it from logseq's built-in plugins menu

    can't open its settings or disable it from logseq's built-in plugins menu

    image This button does not open the corresponding file, while the setting files themselves are empty, not even including the { "disabled": false } part, and thus I can't disable this plugin from the logseq interface.

    Environment: Windows 10, logseq 0.6.3

    opened by lef-est 7
  • .json file shows empty

    .json file shows empty

    When I click on "open settings" on macOS, the firefox tab is empty: image

    I'm totally illiterate in coding etc, so I thought "Hmm, maybe I should open it with a coding software". I installed "Whisk" from setapp and opened the file there. It is empty again: image

    What am I doing wrong?

    opened by mujihuz 4
  • 请教如何将双链配置进wrap

    请教如何将双链配置进wrap

    想将双链配置进wrap,但摸索很久也没有配置好icon,请教一下~ "双链": { "label": "双链", "binding": "", "template": "[[$^]]", "icon":

    opened by Horinne 3
  • 自动读取logseq本体与插件注册的快捷功能,用户自动添加和排布顺序,添加图标

    自动读取logseq本体与插件注册的快捷功能,用户自动添加和排布顺序,添加图标

    能不能读取logseq本体和用户安装插件在logseq的功能,给出列表,让用户自己选择添加,以及设定图标。

    读取/呼出命令中的命令,让用户选择,添加,并自主排序,接入图标库,选择喜欢的图标(感觉有些重复了,而且呼出有问题)

    看大佬自己给这个插件,增加了很多功能,

    obsidian中的大佬修改的插件,从原来选中后弹出,变为顶部固定工具栏 https://github.com/cumany/obsidian-editing-toolbar 原始插件:https://github.com/chetachiezikeuzor/cMenu-Plugin

    opened by aiyou9 2
  • icon配置的位置是否能支持纯文字或svg的text

    icon配置的位置是否能支持纯文字或svg的text

    比如像这样

     "wrap-square": {
        "label": "Wrap square",
        "binding": "",
        "template": "[$^]",
        "icon": "<span>square</span>"
      }
    
      "wrap-square": {
        "label": "Wrap square",
        "binding": "",
        "template": "[$^]",
        "icon": "<svg height=\"24px\" width=\"24px\"> <text x=\"0\" y=\"15\" fill=\"white\">[[]]</text></svg>"
      }
    
    image

    svg资源找了下font awesome的提示要收费 org

    opened by umrwifi 2
  • [Feature Request] Add the option to not show icons

    [Feature Request] Add the option to not show icons

    My json configuration file is as follows.

    "wrap-math-equation": {
        "label": "Wrap with math equation",
        "binding": "ctrl+m",
        "template": " $$^$ "
      },
    "wrap-math-block": {
      "label": "Wrap with math block",
      "binding": "ctrl+shift+m",
      "template": "$$\n$^\n$$"
      }
    

    However, the default icon displayed is "X", can we add an option in the json to control whether to display this icon or not ? image

    opened by Theigrams 2
  • Help with adding inline code option

    Help with adding inline code option

    Hi again, I'm trying to implement an option to wrap inline code. I reused the cloze icon because I don't know how to use svg 🤣, I just changed the color to differentiate.

    But I'm not quite understanding where I have to add the symbols to erase inline code with remove formatting button

    "regex": "\\[\\[(?:#|\\$)(?:red|brown|blue)\\]\\]|==([^=]*)==|~ ~([^~]*)~~|\\^\\^([^\\^]*)\\^\\^|\\*\\*([^\\*]*)\\ *\\*|\\*([^\\*]*)\\*|_([^_]*)_|\\$([^\\$]*)\\$",

    Could you help me?

    opened by Pvazevedo 2
  • 【请教】增加其他高亮或文字颜色

    【请教】增加其他高亮或文字颜色

    开发者,您好!

    首先感谢开发了这款实用插件,和音视频时间戳一样棒!有一个小问题不知可否请教您:

    • 如何能够给文字增加其他颜色,例如:黄色。看了您的说明文档,感觉应该是可以的。具体操作的时候遇到了些小问题:
    "wrap-yellow-text": {
        "label": "Wrap with yellow text",
        "binding": "",
        "template": "[[$yellow]]==$^==",
        "icon": "<svg t=\"1643270432116\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12761\" width=\"200\" height=\"200\"><path d=\"M256 768h512a85.333333 85.333333 0 0 1 85.333333 85.333333v42.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-42.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 85.333333v42.666667h512v-42.666667H256z m401.578667-341.333333H366.421333L298.666667 682.666667H213.333333l256.128-640H554.666667l256 640h-85.333334l-67.754666-170.666667z m-33.877334-85.333333L512 145.365333 400.298667 426.666667h223.402666z\" p-id=\"12762\" fill=\"#FFFF00\"></path></svg>"
      },
    

    上面这段代码添加后,能够在工具栏显示出来。由于【内置高亮与文字色】没有黄色,所以想请问下面这段代码我应该添加到哪个地方

    span[data-ref="$yellow"] + mark {
      color: #ffff00;
      background: unset;
      padding: 0;
      border-radius: 0;
    }
    

    谢谢解答!

    opened by mtuwei 2
  • Interferes with theme colors

    Interferes with theme colors

    Hi @sethyuan Thank you for the plugin.

    I'm using bonofix dark theme, though there may be clashes with other themes too. Since bonofix specifies CSS rules more precisely than the plugin, plugin-wrap fails to change the colors.

    .dark-theme .content mark {
        color: var(--ls-primary-text-color);
        background: rgb(89, 86, 59);
    }
    

    Is there any way to set CSS for mark element without building myself? I guess there is no option for custom CSS in the settings. It may come handy when one wants to change the colors too.

    As a workaround, what do you think about adding !important to color and background to override theme defaults.

    opened by c6p 2
Releases(v0.6.0)
Owner
Seth Yuan
Seth Yuan
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
In this project, you can create optional rooms and people can talk in the rooms

CodeTalk In this project, you can create optional rooms and people can talk in the rooms. Login and Registration page Login page welcomes us. If you d

Nazlı 3 Mar 12, 2022
Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Martin Lang 11 Dec 21, 2022
GifOs is a small app for you to find gifs and also be able to create your own.

GifOs GifOs is an small app for you to find gifs and also be able to create your own ones. Techs Used This project was built with Next.Js and Typescri

Carlos Beltrán R. 6 Oct 11, 2022
A set of connectors to describe, parse and process the data sources provided by websites and social networks

HUDI-PACKAGE-CONNECTORS What is this repository for? A set of connectors to describe, parse and process the data sources provided by websites and soci

HUDI 8 Aug 5, 2022
This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Gauri Bhand 4 Jul 28, 2022
The Basement SDK has sensible defaults and flexibility to allow you to get the data you want efficiently and effortlessly.

Basement SDK The Basement SDK has sensible defaults and flexibility to allow you to get the data you want efficiently and effortlessly. Installation B

Basement for Developers 10 Dec 6, 2022
Check the strength of your password simply and quickly, and with optional UI indicators

Check the strength of your password simply and quickly, and with optional UI indicators. Lock Steel is lightweight, has no dependencies and is connected with the UI elements. Just pure CSS and VanillaJS.

Keenlabi 1 Sep 15, 2022
🎡 Generate a random number, a list of them, or a generator with optional configuration

random_number Generate a random number, a list of them, or a generator with optional configuration Usage import randomNumber from "https://deno.land/x

Eliaz Bobadilla 7 Aug 7, 2022
A Lua plugin, written in TypeScript, to write TypeScript (Lua optional).

typescript.nvim A minimal typescript-language-server integration plugin to set up the language server via nvim-lspconfig and add commands for convenie

Jose Alvarez 315 Dec 29, 2022
ESLint plugin to disallow the optional-call operator

ESLint Plugin: no-optional-call Overview The no-optional-call ESLint plugin provides a single rule (non-configurable) that disallows any usage of the

Kyle Simpson 15 Sep 24, 2022
A simple and useful jquery plugin that allows you to create a Text Area Character Count Effect with limited warning.

jquery-character-counter A simple and useful jquery plugin that allows you to create a Text Area Character Count Effect with limited warning. #Demo Us

Abdoulie Kassama 0 Dec 28, 2020
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

Devang Joshi 1 Mar 1, 2021