Add support for custom css across all notes (#925)

ElectronClient/app/app.js

@@ -676,6 +676,23 @@ class Application extends BaseApplication {
 		document.head.appendChild(styleTag);
 	}
 
+	async loadCustomCss(filePath) {
+		let cssString = '';
+		if (await fs.pathExists(filePath)) {
+			try {
+				cssString = await fs.readFile(filePath, 'utf-8');
+
+			} catch (error) {
+				let msg = error.message ? error.message : '';
+				msg = 'Could not load custom css from ' + filePath + '\n' + msg;
+				error.message = msg;
+				throw error;
+			}
+		}
+
+		return cssString;
+	}
+
 	async start(argv) {
 		const electronIsDev = require('electron-is-dev');
 
@@ -729,6 +746,13 @@ class Application extends BaseApplication {
 			ids: Setting.value('collapsedFolderIds'),
 		});
 
+		const cssString = await this.loadCustomCss(Setting.value('profileDir') + '/userstyle.css');
+
+		this.store().dispatch({
+			type: 'LOAD_CUSTOM_CSS',
+			css: cssString
+		});
+
 		// Note: Auto-update currently doesn't work in Linux: it downloads the update
 		// but then doesn't install it on exit.
 		if (shim.isWindows() || shim.isMac()) {

ElectronClient/app/gui/NoteText.jsx

@@ -843,6 +843,7 @@ class NoteTextComponent extends React.Component {
 
 		let bodyToRender = body;
 		if (bodyToRender === null) bodyToRender = this.state.note && this.state.note.body ? this.state.note.body : '';
+		bodyToRender = '<style>' + this.props.customCss + '</style>\n' + bodyToRender;
 		let bodyHtml = '';
 
 		const visiblePanes = this.props.visiblePanes || ['editor', 'viewer'];
@@ -1601,6 +1602,7 @@ const mapStateToProps = (state) => {
 		searches: state.searches,
 		selectedSearchId: state.selectedSearchId,
 		watchedNoteFiles: state.watchedNoteFiles,
+		customCss: state.customCss,
 	};
 };
 

README.md

@@ -280,6 +280,10 @@ It is generally recommended to enter the notes as Markdown as it makes the notes
 
 	This is <s>strikethrough text</s> mixed with regular **Markdown**.
 
+## Custom CSS
+
+Rendered markdown can be customized by placing a userstyle file in the profile directory `~/.config/joplin/userstyle.css`. This file supports standard css syntax.
+
 # Donations
 
 Donations to Joplin support the development of the project. Developing quality applications mostly takes time, but there are also some expenses, such as digital certificates to sign the applications, app store fees, hosting, etc. Most of all, your donation will make it possible to keep up the current development standard.

ReactNativeClient/lib/reducer.js

@@ -27,6 +27,7 @@ const defaultState = {
 	appState: 'starting',
 	hasDisabledSyncItems: false,
 	newNote: null,
+	customCss: '',
 	collapsedFolderIds: [],
 	clipperServer: {
 		startState: 'idle',
@@ -585,6 +586,12 @@ const reducer = (state = defaultState, action) => {
 				newState.decryptionWorker = decryptionWorker;
 				break;
 
+			case 'LOAD_CUSTOM_CSS':
+
+				newState = Object.assign({}, state);
+				newState.customCss = action.css;
+				break;
+        
 			case 'SET_NOTE_TAGS':
 				newState = Object.assign({}, state);
 				newState.selectedNoteTags = action.items;