Giter VIP home page Giter VIP logo

obsidian-reading-view-enhancer's Introduction

Reading View Enhancer Plugin

The Reading View Enhancer is an Obsidian plugin designed to improve the reading experience in Obsidian's reading view mode. It provides several features aimed at making the reading view more convenient and comfortable.


Features

Overview

  • Keyboard block navigation
    • ArrowDown: Select the next block
    • ArrowUp: Select the previous block
  • Keyboard fold/unfold toggling
    • ArrowLeft/ArrowRight: Toggle fold/unfold
      • ๐Ÿ“Œ Collapsible callouts can also be folded/unfolded
  • Always-visible collapse indicators
    • Keep all collapse indicators visible
  • Table overflow prevention
    • Make tables scrollable to prevent overflowing
  • Scrollable code blocks
    • Make code blocks scrollable instead of line-wrapping

Keyboard Block Navigation

โšก๏ธ Settings > Reading View Enhancer > Enable Block Selector

block-selector.mov

Inspired by Notion's block navigation, this feature allows you to select blocks in the reading view by clicking on them. Selected blocks will be highlighted, and you can navigate between blocks using the arrow keys.

๐Ÿ’ก Additionally, there is a Select top block in the view command, which allows you to assign a hotkey for keyboard control.

If a selected block is too long, the plugin will automatically scroll to display the block's top or bottom, loading adjacent blocks that are not yet in the DOM tree.

  • ArrowDown: Select the next block
  • ArrowUp: Select the previous block
  • ArrowLeft/ArrowRight: Toggle fold/unfold

โ—๏ธ To disable this feature only on mobile, enable the 'Disable Block Selector on Mobile' option in settings.

What is a "Block"?

In this plugin, a "block" refers to an HTML element that can be considered a distinct content unit within a markdown document. Paragraphs, headings, lists, tables, code blocks, quotes, media elements, and callouts are examples of blocks.

Block Color

โšก๏ธ Settings > Reading View Enhancer > Block Color

You can set a custom color for the block highlight effect.


Always-visible Collapse Indicators

โšก๏ธ Settings > Reading View Enhancer > Always on collapse indicator

By default, collapse indicators are invisible until hovered over.

no-indicator

This option,

turn-on-indicator

keeps indicators always visible.

has-indicator


Table Overflow Prevention

โšก๏ธ Settings > Reading View Enhancer > Prevent Table Overflowing

table-overflow.mov

Enable horizontally scrollable tables to prevent table overflow.

In Obsidian v1.1.16, tables having a word longer than the viewport's width will create a horizontal scrollbar across the entire view, which can be inconvenient on mobile devices.


Scrollable Code Blocks

โšก๏ธ Settings > Reading View Enhancer > Scrollable Code

This feature makes code blocks scrollable, rather than using line-wrapping.

By default, codes get line-wrapped when it's too long.

before-code-scroll

With this option,

turn-on-code-scroll

You can make code blocks scrollable instead of line break.

code-scroll


How to install manually?

There might be various ways to install this plugin.

After installation,

  1. Go to Settings > Community Plugins > Installed plugins
  2. Refresh the list
  3. Turn on the switch of "Reading View Enhancer" to enable the plugin

Using Obsidian42-BRAT (Recommended)

By using Obsidian42-BRAT, you could easily install & update this plugin.

  1. Install Obsidian42-BRAT
  2. Enable Obsidian42-BRAT
  3. Go to Obsidian42-BRAT options page
  4. Beta plugins list > Add Beta plugin
  5. Paste this https://github.com/Galacsh/obsidian-reading-view-enhancer
  6. After installation is done, go to Settings > Community Plugins > Installed plugins
  7. Refresh the list
  8. Turn on the switch of "Reading View Enhancer" to enable the plugin

Using curl

Before to run the code, make sure to change [VAULT] and [RELEASE_VERSION] into a real value.

# Go to your vault's plugins folder
cd [VAULT]/.obsidian/plugins
# Make a directory
mkdir obsidian-reading-view-enhancer
cd obsidian-reading-view-enhancer
# Download
curl -OL https://github.com/Galacsh/obsidian-reading-view-enhancer/releases/download/[RELEASE_VERSION]/main.js
curl -OL https://github.com/Galacsh/obsidian-reading-view-enhancer/releases/download/[RELEASE_VERSION]/manifest.json

By downloading manually

  1. Download this files from the latest release
    • main.js
    • manifest.json
  2. Create a directory(obsidian-reading-view-enhancer) inside .obsidian/plugins
  3. Move files to your vault's .obsidian/plugins/obsidian-reading-view-enhancer folder

obsidian-reading-view-enhancer's People

Contributors

galacsh avatar

Stargazers

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

Watchers

 avatar  avatar

obsidian-reading-view-enhancer's Issues

[FR] Make every collapse indicator to the right side

Hello there, that's a really awesome plugin.

I'm using Obsidian mobile on phone a lot and I'm had an idea of getting the collapsible chevron to stick to the right part of the screen.

By any chance, do you know how to do it?

[Feature Request] Always Active Mode for Specific Notes

Hello @Galacsh !!!!!

For some specific notes, I would like to have a way to keep the note always with the collapse indicator ACTIVE every time the note is open in Reading View.

My Idea

If we have an yaml/frontmatter parameter to indicate that this specific note will be always active in reading mode.

This approach is based on the plugin Force View Note that uses the YAML to apply a specific view for a note.

---
obsidianUIMode: preview
---

I would like to have the same flexibility with this plugin :)


Thanks for reading this !!!!! I hope you like my suggestion ๐Ÿ™ ๐Ÿ™ ๐Ÿ™

Let me know if you need more information !!!

Have a great day ๐ŸŒž

[Feature Request] Command to select a block

          > From 0.1.1, since the style is manually injected in the `<head>...</head>`, the plugin doesn't need `styles.css`.

I've uploaded this video on the README.md. Check this out if this fits your needs.

@Galacsh thank you for the reply !

Let me ask you 2 questions to see if I understood correctly ...

1๏ธโƒฃ From version 0.1.1 I have to execute a click operation before using the keyboard shortcuts ?

2๏ธโƒฃ There is no support for Obsidian Mobile?


I am asking you this because my idea is to use your plugin 100% full keyboard hotkeys: open a note on Reading mode (make it the active note) and then hitting keyboard hotkeys to navigate between headers and callouts.

Moreover I use Obsidian Mobile on a iPad with a mouse and keyboard. If possible, I would like to have the same workflow on iPad that I have on Desktop ๐Ÿ™

Thanks for reading this, my idea is to share with you my workflow to see if fits on your plugin idea

Let me know what you think !

Have a great day โ˜€๏ธ

Originally posted by @FelipeRearden in #2 (comment)

[Feature Request] Support for Foldable Callouts

Hello @Galacsh !!!!!

First of all, thank you very much for this amazing plugin !!! I have been looking for a plugin like this for a long time

This way, I am gonna generate some FR's for you based on my workflows.

Thanks for reading this !!!!! I hope you like my suggestion ๐Ÿ™ ๐Ÿ™ ๐Ÿ™


My FR

This first FR is simple to explain: would be amazing if yuo could add the Collapse Indicator for foldable Callouts


> [!NOTE]- Title
> Contents

and


> [!NOTE]+ Title
> Contents


Let me know if you need more information !!!

Have a great day ๐ŸŒž

Auto select first row

Great plugin idea! Will be one of my favs.

I am curious if it would be possible for this plugin to auto-select the first block when switching into read view.

Great work!

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.