Improved code highlighting using codemirror
This commit is contained in:
parent c4bc15c57d
commit f7f6882b29
23 changed files with 3040 additions and 311 deletions
| @ -11,7 +11,7 @@ By default BookStack will use a file system cache that's storage in the `storage | |||
| ||||
As an easy alternative to using the filesystem, you can use the database to store the cache and session. The database setup for this is done when installing/updating BookStack so you simply need to set the following in your `.env` file: | ||||
| ||||
``` | ||||
```bash | ||||
CACHE_DRIVER=database | ||||
SESSION_DRIVER=database | ||||
``` | ||||
| @ -20,7 +20,7 @@ SESSION_DRIVER=database | |||
| ||||
To use memcached for caching and/or sessions open up your `.env` file and find the `CACHE_DRIVER` & `SESSION_DRIVER` variables. By default these are both set to `file`. Change these variables to `memcached`. You will also need to add a variable to specify the memcached servers you are using. To do this add a variable named `MEMCACHED_SERVERS` to the `.env` file and set the value to be your memcached servers in the following format: `HOST:PORT:WEIGHT,HOST2:PORT:WEIGHT`. You can specify as many servers as you want. Their usage split will be determined by the weight given to them. Here are some examples of what the `.env` file should look like: | ||||
| ||||
``` | ||||
```bash | ||||
# Set both the cache and session to use memcached | ||||
CACHE_DRIVER=memcached | ||||
SESSION_DRIVER=memcached | ||||
| @ -40,7 +40,7 @@ To specify if you would like to cluster you Redis servers create a `REDIS_CLUSTE | |||
| ||||
Here's an example of setting the Redis configuration: | ||||
| ||||
``` | ||||
```bash | ||||
# Set both the cache and session to use Redis | ||||
CACHE_DRIVER=redis | ||||
SESSION_DRIVER=redis | ||||
| |
| @ -11,7 +11,7 @@ BookStack has some command line actions that can help with maintenence and commo | |||
| ||||
Here's a listing of the BookStack specific commands: | ||||
| ||||
``` | ||||
```bash | ||||
| ||||
# Delete all activity history from the system | ||||
php artisan bookstack:clear-activity | ||||
| |
| @ -32,7 +32,7 @@ This project currently uses the `release` branch of the BookStack GitHub reposit | |||
| ||||
1. Clone the release branch of the BookStack GitHub repository into a folder. | ||||
| ||||
``` | ||||
```bash | ||||
git clone https://github.com/BookStackApp/BookStack.git --branch release --single-branch | ||||
``` | ||||
| ||||
| @ -48,7 +48,7 @@ This project currently uses the `release` branch of the BookStack GitHub reposit | |||
#### URL Rewrite rules | ||||
| ||||
**Apache** | ||||
``` | ||||
```apache | ||||
Options +FollowSymLinks | ||||
RewriteEngine On | ||||
| ||||
| @ -58,7 +58,7 @@ RewriteRule ^ index.php [L] | |||
``` | ||||
| ||||
**Nginx** | ||||
``` | ||||
```nginx | ||||
location / { | ||||
try_files $uri $uri/ /index.php?$query_string; | ||||
} | ||||
| @ -83,7 +83,7 @@ A script to install BookStack on a fresh instance of Ubuntu 16.04 is available. | |||
| ||||
#### Running the Script | ||||
| ||||
``` bash | ||||
```bash | ||||
# Ensure you have read the above information about what this script does before executing these commands. | ||||
| ||||
# Download the script | ||||
| |
| @ -57,22 +57,22 @@ For Nginx you will need to define a server for each BookStack instance you want | |||
By default, server definitions are stored in the `/etc/nginx/sites-available/` directory. Create a new file here, with a sensible name, for each BookStack instance you want to set up. Use the following configuration as a guide: | ||||
| ||||
| ||||
``` | ||||
```nginx | ||||
# /etc/nginx/sites-available/user-docs.conf | ||||
| ||||
server { | ||||
listen 80; | ||||
listen [::]:80; | ||||
| ||||
| ||||
root /var/www/user-docs/public; | ||||
index index.php; | ||||
| ||||
| ||||
server_name user-docs.example.com; | ||||
| ||||
| ||||
location / { | ||||
try_files $uri $uri/ /index.php?$query_string; | ||||
} | ||||
| ||||
| ||||
location ~ \.php$ { | ||||
try_files $uri /index.php =404; | ||||
fastcgi_split_path_info ^(.+\.php)(/.+)$; | ||||
| |
| @ -13,9 +13,9 @@ As an alternative you can use [wkhtmltopdf](http://wkhtmltopdf.org/) to generate | |||
| ||||
Pre-compiled binaries for wkhtmltopdf can be found on the downloads page of [their website](http://wkhtmltopdf.org/downloads.html). BookStack will check for a file named `wkhtmltopdf` at the base folder of a BookStack install. If found it will use that to render PDF's. If that does not exist it will check for a `WKHTMLTOPDF` variable in the `.env` file. You can use this variable to set an alternate location to wkhtmltopdf: | ||||
| ||||
``` | ||||
```bash | ||||
# In .env file | ||||
WKHTMLTOPDF=/home/user/bins/wkhtmltopdf | ||||
``` | ||||
| ||||
If neither of those exist Dompdf will be used instead. | ||||
If neither of those exist Dompdf will be used instead. | ||||
| |
| @ -34,16 +34,19 @@ Due to the above it's important to ensure you disable 'directory indexes' to pre | |||
users from being able to navigate their way through your images. Here's the configuration | ||||
for NGINX & Apache if your server allows directory indexes: | ||||
| ||||
**NGINX** | ||||
| ||||
``` | ||||
# NGINX | ||||
```nginx | ||||
# By default indexes are disabled on Nginx but if you have them enabled | ||||
# add this to your BookStack server block | ||||
location /uploads { | ||||
autoindex off; | ||||
} | ||||
``` | ||||
| ||||
# Apache | ||||
**Apache** | ||||
| ||||
```apache | ||||
# Add this to your Apache BookStack virtual host if Indexes are enabled. | ||||
# If .htaccess file are enabled then the below should already be active. | ||||
<Location "/uploads"> | ||||
| |
| @ -47,7 +47,7 @@ To create a Twitter application for signing in with you may require a phone numb | |||
4. If you'd like, set an icon and change any other details. | ||||
5. Click the 'Permissions' tab and in the 'Additional Permissions' section check the box 'Request email addresses from users' then save. | ||||
6. Go to the 'Keys and Access Tokens' tab to find your API key and secret. Add or set these to your `.env` file like so: | ||||
``` | ||||
```bash | ||||
# Replace the below (including '{}' braces) with your twitter API_KEY and API_SECRET | ||||
TWITTER_APP_ID={API_KEY} | ||||
TWITTER_APP_SECRET={API_SECRET} | ||||
| @ -68,7 +68,7 @@ To create a Twitter application for signing in with you may require a phone numb | |||
5. On the left sidebar again go to 'Facebook Login' -> 'Settings'. | ||||
6. Enter your base BookStack URL again into the 'Valid OAuth redirect URIs' input and save. | ||||
7. Navigate back to the app 'Dashboard' in the sidebar to find your app id and secret. Add or set these to your `.env` file like so: | ||||
``` | ||||
```bash | ||||
# Replace the below (including '{}' braces) with your facebook APP_KEY and APP_SECRET | ||||
FACEBOOK_APP_ID={APP_KEY} | ||||
FACEBOOK_APP_SECRET={APP_SECRET} | ||||
| @ -85,7 +85,7 @@ To create a Twitter application for signing in with you may require a phone numb | |||
1. Go to the [Slack apps page](https://api.slack.com/apps) and select 'Create New App'. | ||||
2. Enter an app name ('BookStack login' or something custom), select your team then continue. | ||||
3. You should see your client ID and secret. Copy these details and add them as new variables in your `.env` file like so: | ||||
``` | ||||
```bash | ||||
# Replace the below (including '{}' braces) with your slack CLIENT_ID and CLIENT_SECRET | ||||
SLACK_APP_ID={CLIENT_ID} | ||||
SLACK_APP_SECRET={CLIENT_SECRET} | ||||
| @ -94,4 +94,4 @@ To create a Twitter application for signing in with you may require a phone numb | |||
APP_URL=http://mybookstackurl.com | ||||
``` | ||||
4. In your slack app go to 'OAuth & Permissions' and enter your BookStack base url into the 'Redirect URL(s)' input then save. | ||||
5. All done! Users should now be able to link their Slack account in their account profile pages and also register/login using their Slack account. | ||||
5. All done! Users should now be able to link their Slack account in their account profile pages and also register/login using their Slack account. | ||||
| |
| @ -11,14 +11,16 @@ BookStack is updated regularly and is still in beta although we do try to keep t | |||
Backup and restore documentation can be found [here](/docs/admin/backup-restore). | ||||
| ||||
Updating is currently done via Git version control. To update BookStack you can run the following command in the root directory of the application: | ||||
``` | ||||
| ||||
```bash | ||||
git pull origin release && composer install && php artisan migrate | ||||
``` | ||||
| ||||
This command will update the repository that was created in the installation, install the PHP dependencies using `composer` then run then update the database with any required changes. | ||||
| ||||
In addition, we recommend clearing the cache after an update - | ||||
In addition, we recommend clearing the cache after an update - | ||||
| ||||
``` | ||||
```bash | ||||
php artisan cache:clear | ||||
php artisan view:clear | ||||
``` | ||||
| |
| @ -31,7 +31,7 @@ After updating these values ensure you restart your webserver and also PHP if us | |||
| ||||
By default NGINX has a limit of 1MB on file uploads. To change this you will need to set the `client_max_body_size` variable. You can do this either in the http block in your `nginx.conf` file or in the server block set up for BookStack. Here's an example of increasing the limit it 10MB in the http block: | ||||
| ||||
``` | ||||
```nginx | ||||
http { | ||||
#... | ||||
client_max_body_size 100m; | ||||
| @ -50,7 +50,7 @@ After updating you NGINX configuration don't forget to restart NGINX. You can te | |||
| ||||
Apache does not have any built-in limits which you will need to change but something to note is that if you are using apache and mod_php with `.htaccess` files enabled you may be able to set the above PHP variables in your `.htaccess` file like so: | ||||
| ||||
``` | ||||
```apache | ||||
php_value upload_max_filesize 10M | ||||
php_value post_max_size 10M | ||||
``` | ||||
``` | ||||
| |
| @ -15,7 +15,7 @@ to support emoji. | |||
| ||||
From v0.17.2, BookStack has a helper command to generate the SQL for this change. Ensure you are on BookStack v0.17.2 or above and then run this command from root BookStack folder: | ||||
| ||||
``` | ||||
```bash | ||||
php artisan bookstack:db-utf8mb4 | ||||
``` | ||||
| ||||
| |
| @ -2,7 +2,7 @@ | |||
| ||||
This project holds all the data for the https://www.bookstackapp.com/ | ||||
| ||||
This site is built using [Hugo](https://gohugo.io). Images are stored using `git-lfs`. | ||||
This site is built using [Hugo](https://gohugo.io). Images are stored using `git-lfs`. | ||||
| ||||
### Data Locations | ||||
| ||||
| @ -14,4 +14,4 @@ This site is built using [Hugo](https://gohugo.io). Images are stored using `git | |||
| ||||
The theme is custom made with snippets taken from the [hugo capser theme](https://github.com/vjeantet/hugo-theme-casper). | ||||
| ||||
Scss is used for the styling and is built using gulp. Install NPM dependancies via `npm install` or `yarn` then you can use `npm run-script build` to build the css once or `npm run-script dev` to watch for changes. | ||||
SCSS is used for the styling and is built using gulp. Install NPM dependencies via `npm install` or `yarn` then you can use `npm run-script build` to build the css once or `npm run-script dev` to watch for changes. | ||||
| |
| @ -40,7 +40,7 @@ | |||
{{.Content}} | ||||
| ||||
<div class="text-center"> | ||||
<a class="edit-link" target="_blank" | ||||
<a class="edit-link" target="_blank" | ||||
href="https://github.com/BookStackApp/website/blob/master/resources/content/{{ .File.Path }}"> | ||||
<span class="icon small">{{partial "icon/edit.svg"}}</span> | ||||
Edit this Page | ||||
| @ -52,7 +52,4 @@ | |||
| ||||
</div> | ||||
| ||||
<script type="text/javascript" src="/libs/highlight/highlight.pack.js"></script> | ||||
<script>hljs.initHighlightingOnLoad();</script> | ||||
| ||||
{{ partial "footer.html" . }} | ||||
| |
| @ -33,6 +33,9 @@ | |||
}); | ||||
} | ||||
</script> | ||||
<script async src="{{.Site.BaseURL}}js/script.js"></script> | ||||
<script src="{{.Site.BaseURL}}libs/codemirror/codemirror.min.js"></script> | ||||
<script src="{{.Site.BaseURL}}libs/codemirror/modes.js"></script> | ||||
<script src="{{.Site.BaseURL}}js/script.js"></script> | ||||
<script src="{{.Site.BaseURL}}js/script.js"></script> | ||||
</body> | ||||
</html> | ||||
| |
405 themes/bookstack/sass/_codemirror.scss Normal file
405
themes/bookstack/sass/_codemirror.scss Normal file | @ -0,0 +1,405 @@ | |||
/* BASICS */ | ||||
| ||||
.CodeMirror { | ||||
/* Set height, width, borders, and global font properties here */ | ||||
height: 300px; | ||||
color: black; | ||||
} | ||||
| ||||
/* PADDING */ | ||||
| ||||
.CodeMirror-lines { | ||||
padding: 4px 0; /* Vertical padding around content */ | ||||
} | ||||
.CodeMirror pre { | ||||
padding: 0 4px; /* Horizontal padding of content */ | ||||
} | ||||
| ||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { | ||||
background-color: white; /* The little square between H and V scrollbars */ | ||||
} | ||||
| ||||
/* GUTTER */ | ||||
| ||||
.CodeMirror-gutters { | ||||
border-right: 1px solid #ddd; | ||||
background-color: #f7f7f7; | ||||
white-space: nowrap; | ||||
} | ||||
.CodeMirror-linenumbers {} | ||||
.CodeMirror-linenumber { | ||||
padding: 0 3px 0 5px; | ||||
min-width: 20px; | ||||
text-align: right; | ||||
color: #999; | ||||
white-space: nowrap; | ||||
} | ||||
| ||||
.CodeMirror-guttermarker { color: black; } | ||||
.CodeMirror-guttermarker-subtle { color: #999; } | ||||
| ||||
/* CURSOR */ | ||||
| ||||
.CodeMirror-cursor { | ||||
border-left: 1px solid black; | ||||
border-right: none; | ||||
width: 0; | ||||
} | ||||
/* Shown when moving in bi-directional text */ | ||||
.CodeMirror div.CodeMirror-secondarycursor { | ||||
border-left: 1px solid silver; | ||||
} | ||||
.cm-fat-cursor .CodeMirror-cursor { | ||||
width: auto; | ||||
border: 0 !important; | ||||
background: #7e7; | ||||
} | ||||
.cm-fat-cursor div.CodeMirror-cursors { | ||||
z-index: 1; | ||||
} | ||||
| ||||
.cm-animate-fat-cursor { | ||||
width: auto; | ||||
border: 0; | ||||
-webkit-animation: blink 1.06s steps(1) infinite; | ||||
-moz-animation: blink 1.06s steps(1) infinite; | ||||
animation: blink 1.06s steps(1) infinite; | ||||
background-color: #7e7; | ||||
} | ||||
@-moz-keyframes blink { | ||||
0% {} | ||||
50% { background-color: transparent; } | ||||
100% {} | ||||
} | ||||
@-webkit-keyframes blink { | ||||
0% {} | ||||
50% { background-color: transparent; } | ||||
100% {} | ||||
} | ||||
@keyframes blink { | ||||
0% {} | ||||
50% { background-color: transparent; } | ||||
100% {} | ||||
} | ||||
| ||||
/* Can style cursor different in overwrite (non-insert) mode */ | ||||
.CodeMirror-overwrite .CodeMirror-cursor {} | ||||
| ||||
.cm-tab { display: inline-block; text-decoration: inherit; } | ||||
| ||||
.CodeMirror-rulers { | ||||
position: absolute; | ||||
left: 0; right: 0; top: -50px; bottom: -20px; | ||||
overflow: hidden; | ||||
} | ||||
.CodeMirror-ruler { | ||||
border-left: 1px solid #ccc; | ||||
top: 0; bottom: 0; | ||||
position: absolute; | ||||
} | ||||
| ||||
/* DEFAULT THEME */ | ||||
| ||||
.cm-s-default .cm-header {color: blue;} | ||||
.cm-s-default .cm-quote {color: #090;} | ||||
.cm-negative {color: #d44;} | ||||
.cm-positive {color: #292;} | ||||
.cm-header, .cm-strong {font-weight: bold;} | ||||
.cm-em {font-style: italic;} | ||||
.cm-link {text-decoration: underline;} | ||||
.cm-strikethrough {text-decoration: line-through;} | ||||
| ||||
.cm-s-default .cm-keyword {color: #708;} | ||||
.cm-s-default .cm-atom {color: #219;} | ||||
.cm-s-default .cm-number {color: #164;} | ||||
.cm-s-default .cm-def {color: #00f;} | ||||
.cm-s-default .cm-variable, | ||||
.cm-s-default .cm-punctuation, | ||||
.cm-s-default .cm-property, | ||||
.cm-s-default .cm-operator {} | ||||
.cm-s-default .cm-variable-2 {color: #05a;} | ||||
.cm-s-default .cm-variable-3 {color: #085;} | ||||
.cm-s-default .cm-comment {color: #a50;} | ||||
.cm-s-default .cm-string {color: #a11;} | ||||
.cm-s-default .cm-string-2 {color: #f50;} | ||||
.cm-s-default .cm-meta {color: #555;} | ||||
.cm-s-default .cm-qualifier {color: #555;} | ||||
.cm-s-default .cm-builtin {color: #30a;} | ||||
.cm-s-default .cm-bracket {color: #997;} | ||||
.cm-s-default .cm-tag {color: #170;} | ||||
.cm-s-default .cm-attribute {color: #00c;} | ||||
.cm-s-default .cm-hr {color: #999;} | ||||
.cm-s-default .cm-link {color: #00c;} | ||||
| ||||
.cm-s-default .cm-error {color: #f00;} | ||||
.cm-invalidchar {color: #f00;} | ||||
| ||||
.CodeMirror-composing { border-bottom: 2px solid; } | ||||
| ||||
/* Default styles for common addons */ | ||||
| ||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} | ||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} | ||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } | ||||
.CodeMirror-activeline-background {background: #e8f2ff;} | ||||
| ||||
/* STOP */ | ||||
| ||||
/* The rest of this file contains styles related to the mechanics of | ||||
the editor. You probably shouldn't touch them. */ | ||||
| ||||
.CodeMirror { | ||||
position: relative; | ||||
overflow: hidden; | ||||
background: white; | ||||
} | ||||
| ||||
.CodeMirror-scroll { | ||||
overflow: scroll !important; /* Things will break if this is overridden */ | ||||
/* 30px is the magic margin used to hide the element's real scrollbars */ | ||||
/* See overflow: hidden in .CodeMirror */ | ||||
margin-bottom: -30px; margin-right: -30px; | ||||
padding-bottom: 30px; | ||||
height: 100%; | ||||
outline: none; /* Prevent dragging from highlighting the element */ | ||||
position: relative; | ||||
} | ||||
.CodeMirror-sizer { | ||||
position: relative; | ||||
border-right: 30px solid transparent; | ||||
} | ||||
| ||||
/* The fake, visible scrollbars. Used to force redraw during scrolling | ||||
before actual scrolling happens, thus preventing shaking and | ||||
flickering artifacts. */ | ||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { | ||||
position: absolute; | ||||
z-index: 6; | ||||
display: none; | ||||
} | ||||
.CodeMirror-vscrollbar { | ||||
right: 0; top: 0; | ||||
overflow-x: hidden; | ||||
overflow-y: scroll; | ||||
} | ||||
.CodeMirror-hscrollbar { | ||||
bottom: 0; left: 0; | ||||
overflow-y: hidden; | ||||
overflow-x: scroll; | ||||
} | ||||
.CodeMirror-scrollbar-filler { | ||||
right: 0; bottom: 0; | ||||
} | ||||
.CodeMirror-gutter-filler { | ||||
left: 0; bottom: 0; | ||||
} | ||||
| ||||
.CodeMirror-gutters { | ||||
position: absolute; left: 0; top: 0; | ||||
min-height: 100%; | ||||
z-index: 3; | ||||
} | ||||
.CodeMirror-gutter { | ||||
white-space: normal; | ||||
height: 100%; | ||||
display: inline-block; | ||||
vertical-align: top; | ||||
margin-bottom: -30px; | ||||
} | ||||
.CodeMirror-gutter-wrapper { | ||||
position: absolute; | ||||
z-index: 4; | ||||
background: none !important; | ||||
border: none !important; | ||||
} | ||||
.CodeMirror-gutter-background { | ||||
position: absolute; | ||||
top: 0; bottom: 0; | ||||
z-index: 4; | ||||
} | ||||
.CodeMirror-gutter-elt { | ||||
position: absolute; | ||||
cursor: default; | ||||
z-index: 4; | ||||
} | ||||
.CodeMirror-gutter-wrapper ::selection { background-color: transparent } | ||||
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } | ||||
| ||||
.CodeMirror-lines { | ||||
cursor: text; | ||||
min-height: 1px; /* prevents collapsing before first draw */ | ||||
} | ||||
.CodeMirror pre { | ||||
/* Reset some styles that the rest of the page might have set */ | ||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; | ||||
border-width: 0; | ||||
background: transparent; | ||||
font-size: inherit; | ||||
margin: 0; | ||||
white-space: pre; | ||||
word-wrap: normal; | ||||
line-height: inherit; | ||||
color: inherit; | ||||
z-index: 2; | ||||
position: relative; | ||||
overflow: visible; | ||||
-webkit-tap-highlight-color: transparent; | ||||
-webkit-font-variant-ligatures: contextual; | ||||
font-variant-ligatures: contextual; | ||||
&:after { | ||||
content: none; | ||||
display: none; | ||||
} | ||||
} | ||||
.CodeMirror-wrap pre { | ||||
word-wrap: break-word; | ||||
white-space: pre-wrap; | ||||
word-break: normal; | ||||
} | ||||
| ||||
.CodeMirror-linebackground { | ||||
position: absolute; | ||||
left: 0; right: 0; top: 0; bottom: 0; | ||||
z-index: 0; | ||||
} | ||||
| ||||
.CodeMirror-linewidget { | ||||
position: relative; | ||||
z-index: 2; | ||||
overflow: auto; | ||||
} | ||||
| ||||
.CodeMirror-widget {} | ||||
| ||||
.CodeMirror-rtl pre { direction: rtl; } | ||||
| ||||
.CodeMirror-code { | ||||
outline: none; | ||||
} | ||||
| ||||
/* Force content-box sizing for the elements where we expect it */ | ||||
.CodeMirror-scroll, | ||||
.CodeMirror-sizer, | ||||
.CodeMirror-gutter, | ||||
.CodeMirror-gutters, | ||||
.CodeMirror-linenumber { | ||||
-moz-box-sizing: content-box; | ||||
box-sizing: content-box; | ||||
} | ||||
| ||||
.CodeMirror-measure { | ||||
position: absolute; | ||||
width: 100%; | ||||
height: 0; | ||||
overflow: hidden; | ||||
visibility: hidden; | ||||
} | ||||
| ||||
.CodeMirror-cursor { | ||||
position: absolute; | ||||
pointer-events: none; | ||||
} | ||||
.CodeMirror-measure pre { position: static; } | ||||
| ||||
div.CodeMirror-cursors { | ||||
visibility: hidden; | ||||
position: relative; | ||||
z-index: 3; | ||||
} | ||||
div.CodeMirror-dragcursors { | ||||
visibility: visible; | ||||
} | ||||
| ||||
.CodeMirror-focused div.CodeMirror-cursors { | ||||
visibility: visible; | ||||
} | ||||
| ||||
.CodeMirror-selected { background: #d9d9d9; } | ||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } | ||||
.CodeMirror-crosshair { cursor: crosshair; } | ||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } | ||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } | ||||
| ||||
.cm-searching { | ||||
background: #ffa; | ||||
background: rgba(255, 255, 0, .4); | ||||
} | ||||
| ||||
/* Used to force a border model for a node */ | ||||
.cm-force-border { padding-right: .1px; } | ||||
| ||||
@media print { | ||||
/* Hide the cursor when printing */ | ||||
.CodeMirror div.CodeMirror-cursors { | ||||
visibility: hidden; | ||||
} | ||||
} | ||||
| ||||
/* See issue #2901 */ | ||||
.cm-tab-wrap-hack:after { content: ''; } | ||||
| ||||
/* Help users use markselection to safely style text background */ | ||||
span.CodeMirror-selectedtext { background: none; } | ||||
| ||||
| ||||
/* | ||||
| ||||
Name: Base16 Default Light | ||||
Author: Chris Kempson (http://chriskempson.com) | ||||
| ||||
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) | ||||
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) | ||||
| ||||
*/ | ||||
| ||||
.cm-s-base16-light.CodeMirror { background: #f8f8f8; color: #444444; } | ||||
.cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; } | ||||
.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; } | ||||
.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; } | ||||
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; } | ||||
.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; } | ||||
.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; } | ||||
.cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; } | ||||
.cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; } | ||||
| ||||
.cm-s-base16-light span.cm-comment { color: #8f5536; } | ||||
.cm-s-base16-light span.cm-atom { color: #aa759f; } | ||||
.cm-s-base16-light span.cm-number { color: #aa759f; } | ||||
| ||||
.cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #678c30; } | ||||
.cm-s-base16-light span.cm-keyword { color: #ac4142; } | ||||
.cm-s-base16-light span.cm-string { color: #e09c3c; } | ||||
| ||||
.cm-s-base16-light span.cm-variable { color: #90a959; } | ||||
.cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; } | ||||
.cm-s-base16-light span.cm-def { color: #d28445; } | ||||
.cm-s-base16-light span.cm-bracket { color: #202020; } | ||||
.cm-s-base16-light span.cm-tag { color: #ac4142; } | ||||
.cm-s-base16-light span.cm-link { color: #aa759f; } | ||||
.cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; } | ||||
| ||||
.cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; } | ||||
.cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } | ||||
| ||||
/** | ||||
* Custom BookStack overrides | ||||
*/ | ||||
.CodeMirror, .CodeMirror pre { | ||||
font-size: 12px; | ||||
} | ||||
.CodeMirror { | ||||
font-size: 12px; | ||||
height: auto; | ||||
margin-bottom: $-l; | ||||
border: 1px solid #DDD;; | ||||
} | ||||
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 1px solid #DDD; } | ||||
| ||||
.code-fill .CodeMirror { | ||||
position: absolute; | ||||
top: 0; | ||||
bottom: 0; | ||||
left: 0; | ||||
width: 100%; | ||||
height: 100%; | ||||
} |
| @ -2,6 +2,7 @@ | |||
@import "variables"; | ||||
@import "mixins"; | ||||
@import "html"; | ||||
@import "codemirror"; | ||||
@import "text"; | ||||
@import "grid"; | ||||
@import "blocks"; | ||||
| @ -283,7 +284,7 @@ h2.thin-margin { | |||
margin-bottom: $-m; | ||||
width: 280px; | ||||
background-color: #FFF; | ||||
border: 1px solid #DDD; | ||||
border: 1px solid #DDD; | ||||
a { | ||||
display: block; | ||||
} | ||||
| @ -324,4 +325,4 @@ input[type="text"].doc-search-input { | |||
&:focus, &:active { | ||||
outline: none; | ||||
} | ||||
} | ||||
} | ||||
| |
| @ -22,7 +22,7 @@ document.body.onclick = function(event) { | |||
| ||||
| ||||
// Handle video click to play | ||||
let videos = document.querySelectorAll('video'); | ||||
var videos = document.querySelectorAll('video'); | ||||
for (var i = 0; i < videos.length; i++) { | ||||
videos[i].addEventListener('click', videoClick) | ||||
} | ||||
| @ -30,4 +30,36 @@ for (var i = 0; i < videos.length; i++) { | |||
function videoClick() { | ||||
if (typeof InstallTrigger !== 'undefined') return; | ||||
this.paused ? this.play() : this.pause(); | ||||
} | ||||
} | ||||
| ||||
| ||||
// Codemirror Setup | ||||
| ||||
var modeMap = { | ||||
'language-html': 'htmlmixed', | ||||
'language-bash': 'shell', | ||||
'language-js': 'javascript', | ||||
'language-shell': 'bash', | ||||
'language-nginx': 'nginx', | ||||
'language-apache': 'xml' | ||||
}; | ||||
| ||||
var codeBlocks = document.querySelectorAll('pre'); | ||||
for (var i = 0; i < codeBlocks.length; i++) { | ||||
var block = codeBlocks[i]; | ||||
var codeElem = block.querySelector('code'); | ||||
if (codeElem === null) continue; | ||||
| ||||
var langClass = codeElem.className; | ||||
var mode = (typeof modeMap[langClass] !== 'undefined') ? modeMap[langClass] : 'htmlmixed'; | ||||
var content = codeElem.textContent.trim(); | ||||
CodeMirror(function(cmElem) { | ||||
block.parentNode.replaceChild(cmElem, block); | ||||
}, { | ||||
theme: 'base16-light', | ||||
lineNumbers: true, | ||||
mode: mode, | ||||
readOnly: true, | ||||
value: content | ||||
}); | ||||
} | ||||
| |
21 themes/bookstack/static/libs/codemirror/LICENSE Normal file
21
themes/bookstack/static/libs/codemirror/LICENSE Normal file | @ -0,0 +1,21 @@ | |||
MIT License | ||||
| ||||
Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others | ||||
| ||||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||||
of this software and associated documentation files (the "Software"), to deal | ||||
in the Software without restriction, including without limitation the rights | ||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||||
copies of the Software, and to permit persons to whom the Software is | ||||
furnished to do so, subject to the following conditions: | ||||
| ||||
The above copyright notice and this permission notice shall be included in | ||||
all copies or substantial portions of the Software. | ||||
| ||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||||
THE SOFTWARE. |
1 themes/bookstack/static/libs/codemirror/codemirror.min.js vendored Normal file
1
themes/bookstack/static/libs/codemirror/codemirror.min.js vendored Normal file File diff suppressed because one or more lines are too long
2535 themes/bookstack/static/libs/codemirror/modes.js vendored Normal file
2535
themes/bookstack/static/libs/codemirror/modes.js vendored Normal file File diff suppressed because one or more lines are too long
| @ -1,24 +0,0 @@ | |||
Copyright (c) 2006, Ivan Sagalaev | ||||
All rights reserved. | ||||
Redistribution and use in source and binary forms, with or without | ||||
modification, are permitted provided that the following conditions are met: | ||||
| ||||
* Redistributions of source code must retain the above copyright | ||||
notice, this list of conditions and the following disclaimer. | ||||
* Redistributions in binary form must reproduce the above copyright | ||||
notice, this list of conditions and the following disclaimer in the | ||||
documentation and/or other materials provided with the distribution. | ||||
* Neither the name of highlight.js nor the names of its contributors | ||||
may be used to endorse or promote products derived from this software | ||||
without specific prior written permission. | ||||
| ||||
THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY | ||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | ||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | ||||
DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY | ||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | ||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | ||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | ||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | ||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS | ||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| @ -1,150 +0,0 @@ | |||
# Highlight.js | ||||
| ||||
[](https://travis-ci.org/isagalaev/highlight.js) | ||||
| ||||
Highlight.js is a syntax highlighter written in JavaScript. It works in | ||||
the browser as well as on the server. It works with pretty much any | ||||
markup, doesn’t depend on any framework and has automatic language | ||||
detection. | ||||
| ||||
## Getting Started | ||||
| ||||
The bare minimum for using highlight.js on a web page is linking to the | ||||
library along with one of the styles and calling | ||||
[`initHighlightingOnLoad`][1]: | ||||
| ||||
```html | ||||
<link rel="stylesheet" href="/path/to/styles/default.css"> | ||||
<script src="/path/to/highlight.pack.js"></script> | ||||
<script>hljs.initHighlightingOnLoad();</script> | ||||
``` | ||||
| ||||
This will find and highlight code inside of `<pre><code>` tags; it tries | ||||
to detect the language automatically. If automatic detection doesn’t | ||||
work for you, you can specify the language in the `class` attribute: | ||||
| ||||
```html | ||||
<pre><code class="html">...</code></pre> | ||||
``` | ||||
| ||||
The list of supported language classes is available in the [class | ||||
reference][2]. Classes can also be prefixed with either `language-` or | ||||
`lang-`. | ||||
| ||||
To disable highlighting altogether use the `nohighlight` class: | ||||
| ||||
```html | ||||
<pre><code class="nohighlight">...</code></pre> | ||||
``` | ||||
| ||||
## Custom Initialization | ||||
| ||||
When you need a bit more control over the initialization of | ||||
highlight.js, you can use the [`highlightBlock`][3] and [`configure`][4] | ||||
functions. This allows you to control *what* to highlight and *when*. | ||||
| ||||
Here’s an equivalent way to calling [`initHighlightingOnLoad`][1] using | ||||
jQuery: | ||||
| ||||
```javascript | ||||
$(document).ready(function() { | ||||
$('pre code').each(function(i, block) { | ||||
hljs.highlightBlock(block); | ||||
}); | ||||
}); | ||||
``` | ||||
| ||||
You can use any tags instead of `<pre><code>` to mark up your code. If | ||||
you don't use a container that preserve line breaks you will need to | ||||
configure highlight.js to use the `<br>` tag: | ||||
| ||||
```javascript | ||||
hljs.configure({useBR: true}); | ||||
| ||||
$('div.code').each(function(i, block) { | ||||
hljs.highlightBlock(block); | ||||
}); | ||||
``` | ||||
| ||||
For other options refer to the documentation for [`configure`][4]. | ||||
| ||||
| ||||
## Web Workers | ||||
| ||||
You can run highlighting inside a web worker to avoid freezing the browser | ||||
window while dealing with very big chunks of code. | ||||
| ||||
In your main script: | ||||
| ||||
```javascript | ||||
addEventListener('load', function() { | ||||
var code = document.querySelector('#code'); | ||||
var worker = new Worker('worker.js'); | ||||
worker.onmessage = function(event) { code.innerHTML = event.data; } | ||||
worker.postMessage(code.textContent); | ||||
}) | ||||
``` | ||||
| ||||
In worker.js: | ||||
| ||||
```javascript | ||||
onmessage = function(event) { | ||||
importScripts('<path>/highlight.pack.js'); | ||||
var result = self.hljs.highlightAuto(event.data); | ||||
postMessage(result.value); | ||||
} | ||||
``` | ||||
| ||||
| ||||
## Getting the Library | ||||
| ||||
You can get highlight.js as a hosted, or custom-build, browser script or | ||||
as a server module. Right out of the box the browser script supports | ||||
both AMD and CommonJS, so if you wish you can use RequireJS or | ||||
Browserify without having to build from source. The server module also | ||||
works perfectly fine with Browserify, but there is the option to use a | ||||
build specific to browsers rather than something meant for a server. | ||||
Head over to the [download page][5] for all the options. | ||||
| ||||
**Don't link to GitHub directly.** The library is not supposed to work straight | ||||
from the source, it requires building. If none of the pre-packaged options | ||||
work for you refer to the [building documentation][6]. | ||||
| ||||
**The CDN-hosted package doesn't have all the languages.** Otherwise it'd be | ||||
too big. If you don't see the language you need in the ["Common" section][5], | ||||
it can be added manually: | ||||
| ||||
```html | ||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script> | ||||
``` | ||||
| ||||
**On Almond.** You need to use the optimizer to give the module a name. For | ||||
example: | ||||
| ||||
``` | ||||
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js | ||||
``` | ||||
| ||||
| ||||
## License | ||||
| ||||
Highlight.js is released under the BSD License. See [LICENSE][7] file | ||||
for details. | ||||
| ||||
## Links | ||||
| ||||
The official site for the library is at <https://highlightjs.org/>. | ||||
| ||||
Further in-depth documentation for the API and other topics is at | ||||
<http://highlightjs.readthedocs.io/>. | ||||
| ||||
Authors and contributors are listed in the [AUTHORS.en.txt][8] file. | ||||
| ||||
[1]: http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload | ||||
[2]: http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html | ||||
[3]: http://highlightjs.readthedocs.io/en/latest/api.html#highlightblock-block | ||||
[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options | ||||
[5]: https://highlightjs.org/download/ | ||||
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html | ||||
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE | ||||
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.en.txt |
File diff suppressed because one or more lines are too long
| @ -1,95 +0,0 @@ | |||
/* | ||||
| ||||
Atom One Light by Daniel Gamage | ||||
Original One Light Syntax theme from https://github.com/atom/one-light-syntax | ||||
| ||||
base: #fafafa | ||||
mono-1: #383a42 | ||||
mono-2: #686b77 | ||||
mono-3: #a0a1a7 | ||||
hue-1: #0184bb | ||||
hue-2: #4078f2 | ||||
hue-3: #a626a4 | ||||
hue-4: #50a14f | ||||
hue-5: #e45649 | ||||
hue-5-2: #c91243 | ||||
hue-6: #986801 | ||||
hue-6-2: #c18401 | ||||
| ||||
*/ | ||||
| ||||
.hljs { | ||||
display: block; | ||||
overflow-x: auto; | ||||
padding: 0.5em; | ||||
color: #383a42; | ||||
background: #fafafa; | ||||
} | ||||
| ||||
.hljs-comment, | ||||
.hljs-quote { | ||||
color: #a0a1a7; | ||||
font-style: italic; | ||||
} | ||||
| ||||
.hljs-doctag, | ||||
.hljs-keyword, | ||||
.hljs-formula { | ||||
color: #a626a4; | ||||
} | ||||
| ||||
.hljs-section, | ||||
.hljs-name, | ||||
.hljs-selector-tag, | ||||
.hljs-deletion, | ||||
.hljs-subst { | ||||
color: #e45649; | ||||
} | ||||
| ||||
.hljs-literal { | ||||
color: #0184bb; | ||||
} | ||||
| ||||
.hljs-string, | ||||
.hljs-regexp, | ||||
.hljs-addition, | ||||
.hljs-attribute, | ||||
.hljs-meta-string { | ||||
color: #50a14f; | ||||
} | ||||
| ||||
.hljs-built_in, | ||||
.hljs-class .hljs-title { | ||||
color: #c18401; | ||||
} | ||||
| ||||
.hljs-variable, | ||||
.hljs-template-variable, | ||||
.hljs-type, | ||||
.hljs-selector-class, | ||||
.hljs-selector-attr, | ||||
.hljs-selector-pseudo, | ||||
.hljs-number { | ||||
color: #986801; | ||||
} | ||||
| ||||
.hljs-symbol, | ||||
.hljs-bullet, | ||||
.hljs-link, | ||||
.hljs-meta, | ||||
.hljs-selector-id, | ||||
.hljs-title { | ||||
color: #4078f2; | ||||
} | ||||
| ||||
.hljs-emphasis { | ||||
font-style: italic; | ||||
} | ||||
| ||||
.hljs-strong { | ||||
font-weight: bold; | ||||
} | ||||
| ||||
.hljs-link { | ||||
text-decoration: underline; | ||||
} |
Loading…
Add table
Add a link
Reference in a new issue