Bluestone

The Bluestone Editor is a WYSIWYG Markdown editor that utilizes the GitHub Flavored Markdown standard and extends the Mermaid graphics and Katex formula, supporting light and dark styles, with the goal of improving the Markdown editing and reading experience.

Bluestone also provides a custom shared program. If you have your own Linux server, you can set up a shared service within 5 minutes. Click here for details.

Unlike other WYSIWYG editors, Bluestone does not pursue complete freedom and customizability. It is more like a modern note taking application, only saved in standard markdown format to make your documents portable at any time. Markdown as a format compatible with most platforms, can be freely used on other platforms and backup methods can be freely chosen.

Features

• The rich text editing mode is used, while also compatible with Markdown syntax conversion and editing habits. When using the search function, Markdown symbols will not be searched.

• Using shiki as a code shader has rich language and style support, making the code highlight more fine-grained and aesthetically pleasing.

• Enhanced table operations, allowing for easy adjustment of the order and quantity of rows and columns in the table, and the ability to wrap within the table.

• Support the editing and display of block and inline Katex formulas

• Supports mermaid graphic syntax.

• The file path link can be automatically reconstructed, and when a file or folder is renamed or moved, the local path of the links or images that the document depends on will be automatically changed.

• Automatically record and clear file history, can be viewed and rolled back at any time.

• You can freely drag and adjust the order of document elements.

• Supports multi tab editing mode

• Support pasting HTML, plain text, and markdown code. When pasting HTML and markdown code, it can be configured to automatically download network images to the local machine and convert paths during pasting.

• Provides a powerful sharing program, Linux server required.

Markdown

You can quickly insert or convert elements using shortcut keys or/symbols, or convert elements using markdown syntax.

Line elements can be converted using floating bar shortcuts or syntax conversion, typically by typing the last character. For example, the last * symbol of **bold** triggers format conversion. The following are some common insertion methods for elements.

Heading

At the beginning of the paragraph, type 1-4 # characters and add spaces to convert it to a 1-4 level title. The title will automatically generate an outline on the right side of the editor.

Blockquote

Typing>with spaces at the beginning of a paragraph can convert it to a blockquote, as shown below

blockquote

Images and links

Enter![alt][link] format can insert image elements, type the last] character to convert it.

You can also use [text][link] to insert a link. Links support HTTP links or file paths, while file paths also support linking to anchors, such as:/Folder/markdown.md#title

Screenshots or native image files can be directly pasted to the editing area. If the workspace opens the document space, the images will be automatically saved to the .images folder under the workspace folder. If the folder is not opened, it will be saved to the temporary storage area of the app system.

The menu item for clearing unused images in the.images folder can be found in the system menu.

Use mod+click to open the link in the bluestone document.

Github Table

Typing |title1|title2| at the beginning of the paragraph will automatically create a table with 2 columns. Use mod+enter to create a new row, and use mod+shif+backstace to delete the current row.

Right click in any table cell of the table to view more operations.

List

Typing 1 or - adding spaces at the beginning of a paragraph can convert it to an ordered or unordered list. Adding [ ] and spaces at the beginning of a paragraph can convert them into a task list, or use shortcut keys in the system menu to control them.

1. list item1

2. list item2

3. list item3

   1. task1

   2. task2

      ts

      const text = 'This is the nested content of list items'

   3. task3

List items can be nested with content. Use mod+enter to insert new elements into the list items, and use mod+shift+tab to make the list items fall back and indent.

Code Fence

Enter the following content at the beginning of the paragraph and add a enter to create a code fence.

```[lang]

Click on the language display area in the upper right corner of the code fenc to switch between code snippet languages or copy code content. At the end of the code snippet, use mod+enter to jump out of the code fence or use the up and down arrow keys.

class Human {
	public say() { 
		console.log('hello world')
	}
}

package main

import "fmt"

func main() {    
    fmt.Println("Hello, World!")
}

import Cocoa
struct MarksStruct {   
    var mark: Int
    init(mark: Int) {
        self.mark = mark
    }
}
var aStruct = MarksStruct(mark: 98)
print(aStruct.mark)

Mermaid

Mermaid is a tool that uses syntax to render graphics. When you create a code snippet for the Mermaid language, the Mermaid graphics will be automatically rendered below the code snippet for more details.

When the cursor leaves the input area, the code fence will be automatically collapsed.

An example is as follows:

Katex

Katex is a mathematical formula renderer.

Type$$at the beginning of the paragraph to create a block level formula editing area, where the formula will automatically render below. Type $tex$to create an in line formula editing area. When the cursor leaves the editing area, the editing area will be automatically folded.

Html

At the beginning of the paragraph, type any HTML tag such as<div> and enter to create an HTML rendering area, as shown in the following figure:

Sharing service

Bluestone provides a Node.js based network service program, allowing your documents to be easily shared with other readers. He will establish a mapping between the device file path and remote documents, allowing local Markdown documents to be shared to the network with just one click, and will automatically manage image dependencies and link conversions. The usage process is very simple. If you have your own Linux server, it can be installed within 5 minutes. The generation effect can refer to this document.

Share program features

1. No intrusion into local documents, only synchronize relevant files to the server when you want to share local documents.

2. Using sqlite as data storage, Linux servers generally include the sqlite program by default.

3. You can share a single markdown file or the entire folder. The document links in the folder will automatically convert the links when uploaded, and internal documents can use file paths to jump to each other.

4. When synchronizing file updates, the hash value of the file will be compared, and uploaded documents or images will not be uploaded again.

5. The images that the document depends on will be automatically managed. When the document is closed for sharing, the images will be automatically deleted and there will be no redundant files on the server.

6. The generated document and editor display effects are completely consistent, using next.js  as the server-side rendering framework. The network document opens very quickly, and the document is responsive. It can also be read normally on mobile devices.

7. The  device ID  and  file path  generate a  unique ID on the server, and multiple devices will not affect each other. A server can also be used by multiple people simultaneously.

8. The service program has the ability to automatically update. If a new service program is released, an upgrade prompt will appear in the editor. Click the upgrade button to proceed.

9. The Code Style  and  Show Code Line Number  settings in the editor will be automatically synchronized to the service to control the display of code snippets.

When renaming or moving files and folders in the Bluestone Editor, if the custom service is enabled, the remote file mapping path will be automatically changed.

Install

Network programs rely on the latest nodejs features and have certain requirements for Linuxsystem versions.

If you want to use Docker deployment, please check here.

• centos 8+

• ubuntu 20+

• debian 10+

Assuming you log in to the server using the root account

# Need unzip decompression program or yum install unzip
apt install unzip
# Install nodejs management tool
curl -fsSL https://fnm.vercel.app/install | bash
source $HOME/.bashrc
# Installing nodejs 18
fnm install 18
# Download and install the bluestone sharing program
curl -fsSL https://github.com/1943time/bluestone-service/releases/latest/download/install.sh | bash
cd bluestone-service
# Starting network services
pm2 start

Configuration

There is a package.json file in the bluestone-service folder. By default, the sharing program uses port 80. If you want to change the port, you can change the scripts ->start field in the JSON file.

{
  "scripts": {
    //"start": "next start -p 80",
    // Change port to 3000
    "start": "next start -p 3000"
  }
}

In the bluestone field, there are the following configurations that can be customized according to usage

{
  "bluestone": {
    "secret": "BLUESTONE",
    "home-site": "",
    "favicon": "/favicon.png"
  }
}

• secret Connect Secret, used in editor connect settings, Suggest changes.

• home-site Configure this field to display the site icon in the upper right corner of the network document, click the link to the homepage.

• favicon The icon path of the site is located in the /public folder of the service program by default, and can be replaced with other images

After changing the configuration, it is necessary to restart the service program using pm2 restart bluestone, First time startup, please use pm2 start. If it is necessary to stop the service program, use pm2 stop bluestone.

After completing the settings, you can publish the Markdown document with just one click. the local image that the Markdown document depends on will be automatically uploaded when published.

Folder

Bluestone supports shared folders, where multiple documents within the folder can be published as multiple chapters in one document, and a global search function has been added, just like this document.

Documents within a folder can be redirected to each other using relative file paths, such as./hello.md will automatically convert their links during synchronization. You can also add anchor links ./hello.md#title.

Open any folder, select book -> create book

Every time the synchronization folder is updated, Bluestone only synchronizes the changed files. The files in the Bluestone document space can be adjusted in the desired order, and the file hierarchy and sorting are consistent with the sorting in the editor when sharing.

Nginx

In most cases, the sharing program may not enable port 80, and you may need an nginx proxy. The following nginx configurations can be used as a reference:

server {
    listen      80;
    # listen      443 ssl;
    # ssl_certificate path.pem;
    # ssl_certificate_key path.key;
    # ssl_session_timeout 5m;
    # ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    # ssl_prefer_server_ciphers on;
    server_name  doc.yourdomain.com;
    gzip on;
    gzip_comp_level 6;
    gzip_min_length 1k;
    gzip_static on;
    gzip_types
    application/javascript
    text/javascript
    text/css
    application/json
    application/manifest+json
    image/svg+xml
    application/wasm;
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host  $http_host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_http_version 1.1;
        proxy_pass    http://localhost:3003; # Opened ports
        if ($request_filename ~* ^.*?\.(gif|jpg|jpeg|png|css|js|json|ttf|woff|woff2|wasm)$){
           expires  max;
        }
    }
}

Prattling

Bluestone aims to pursue a better reading and editing experience, and make it easier to share. Friends who like Bluestone are welcome to provide suggestions. However, Bluestone does not want to become a comprehensive editor that is compatible with most functions. For absolute freedom, the author believes that vscode is a better choice.

Email: [email protected].