First, let's install the Laravel Framework 7.x framework. There are many ways here;
Go directly to the official website to download the Laravel source package, or clone the source code directly:
After downloading, enter the Laravel directory:
Next, install Laravel. There is a prelude. If you don’t know much about the use of Composer, you can read this article first to learn more about the use of Composer:
https://blog.csdn.net/lchmyhua88/article/details/88928342
Next, start the installation. Because Composer's entry installation is too slow, change the mirror:
Wait until the installation is complete, then install key:generate
Configure the access address in nginx:
server {
listen 80;
server_name lch.markdown.com;
root "/htdocs/laravel-master/public/";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
access_log on;
error_log /var/log/nginx/lch.markdown.com-error.log error;
sendfile off;
client_max_body_size 100m;
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_intercept_errors off;
fastcgi_buffer_size 16k;
fastcgi_buffers 4 16k;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
}
location ~ /\.ht {
deny all;
}
}
Restart nginx, and then visit:
Then install Markdown:
Installation process
1. Two ways of installation
① Edit the configuration file directly
Add the following to composer.json:
require: { "chenhua/laravel5-markdown-editor": "~1.0" } and then run composer update.
② Execute command installation
Run the command:
composer require chenhua/laravel5-markdown-editor
2. After completing the above operations, modify the providers array in config/app.php
Chenhua\MarkdownEditor\MarkdownEditorServiceProvider::class,
3. Modify the aliases array in config/app.php
'MarkdownEditor' => Chenhua\MarkdownEditor\Facades\MarkdownEditor::class,
4. Execute the artisan command to generate the config/markdowneditor.php configuration file
php artisan vendor:publish --tag=markdown
5. Modify the config/markdowneditor.php configuration file
<?php
return [
"default" =>'local', //Return the storage location url by default
"dirver" => ['local'], //Storage platform['local','qiniu','aliyun']
" connections" => [
"local" => [
'prefix' =>'uploads/markdown', //local storage location, default uploads
],
"qiniu" => [
'access_key' =>'',
'secret_key' = >'',
'bucket' =>'',
'prefix' =>'', //file prefix file/of/
path'domain' =>'' //Qiniu custom domain name
],
"aliyun" => [
'ak_id' => '',
'ak_secret' => '',
'end_point' => '',
'bucket' => '',
'prefix' => '',
],
],
];
Next we add in the /routes/web.php file:
Route::get('/markDown', function () {
return view('markdown');
});
Add the markdown.blade.php file under the resources/views/ directory:
The content is as follows:
After saving, we visit through the browser:
You can see that the editor has been generated, you can enter the content in the editor to see the effect, for example, I enter the following:
### Main features
-Supports "standard" Markdown/CommonMark and Github style syntax, and can also be turned into a code editor;-Supports
real-time preview, image (cross-domain) upload, preformatted text/code/table insertion, code folding, search and replace, Read-only mode, custom style themes, and multi-language syntax highlighting functions;
-Support ToC (Table of Contents), Emoji, Task lists,
@link and other Markdown extended syntax; -Support TeX scientific formulas (based on KaTeX), processes Diagram Flowchart and Sequence Diagram Sequence Diagram;-Supports the
identification and analysis of HTML tags, and supports custom filter tag analysis, with reliable security and almost unlimited scalability;
-Support AMD / CMD modular loading (support Require.js & Sea.js), and supports custom extensions;
-Compatible with mainstream browsers (IE8+) and Zepto.js, and supports iPad and other tablet devices;-Supports
custom theme styles;
# Editor.md
     
**Table of Contents**
[TOCM]
[TOC]
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### Heading (underline)
This is an H1
=============
This is an H2
-------------
### Character effects and horizontal lines, etc
.----
~~
Strikethrough ~~ <s> Strikethrough (when recognizing HTML tags is turned on)</s> *italic* _italic_
**bold** __bold__
***bold italic*** ___Bold Italic___
上标：X<sub>2</sub>，下标：O<sup>2</sup>
**Abbreviation (same as HTML abbr tag)**
> That is the abbreviation of longer words or phrases, provided that when the recognition of HTML tags is turned on, it is turned on by default
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
### Quote Blockquotes
> Quoted text Blockquotes
Mixed Blockquotes in the quoted line
> Quote: If you want to insert a blank line feed `namely <br />tag`, first type two or more spaces at the insertion place and press Enter, [ordinary link](http://localhost/ ).
### Anchors and Links
[Normal link](http://localhost/)
[Common link with title](http://localhost/ "Common link with title")
Direct link: <https://github.com>
[Anchor link][anchor-id]
[anchor-id]: http://www.this-anchor-link.com/
GFM a-tail link @pandao
> @pandao
### Multi-language code highlighting Codes
#### Inline code
Execute the command: `npm install marked`
#### Indentation style
That is, the indentation is four spaces, which is also used to achieve a function similar to `<pre>` Preformatted Text.
<?php
echo "Hello world!";
?>
Preformatted text:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
#### JS code
```javascript
function test(){
console.log("Hello world!");
}
(function(){
var box = function(){
return box.fn.init();
};
box.prototype = box.fn = {
init : function(){
console.log('box.init()');
return this;
},
add : function(str){
alert("add", str);
return this;
},
remove : function(str){
alert("remove", str);
return this;
}
};
box.fn.init.prototype = box.fn;
window.box =box;
})();
var testBox = box();
testBox.add("jQuery").remove("jQuery");
```
#### HTML code HTML codes
```html
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<title>Hello world!</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
```
### Images
Image:
> Follow your heart.
> Pictured: Xiamen Baicheng Beach
Image plus link (Image + Link):
[](https://pandao.github.io/editor.md/examples/images/7.jpg "Li Jian's first album "Like Water Flowing Years" Cover")
> Pictured: The cover of Li Jian's first album "The Years Like Water"
----
### Lists
#### Unordered Lists (Minus Sign) Unordered Lists (-)
-List One
-List Two
-List Three
#### Unordered List (Asterisk) Unordered Lists (*)
* List one
* List two
* List three
#### Unordered Lists (plus signs and nesting) Unordered Lists (+)
+ List One
+ List Two
+ List Two-1
+ List Two-2
+ List Two-3
+ List Three
* List One
* List Two
* List Three
#### Ordered Lists (-)
1. The first line
2. The second line
3. The third line
#### GFM task list
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
----
### 绘制表格 Tables
| Item | Price | Quantity |
| -------- | -----: | :----: |
| Computer | $1600 | 5 |
| Mobile | $12 | 12 |
| Pipeline | $1 | 234 |
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Function name | Description |
| ------------- | ------------------------------ |
| `help()` | Display the help window. |
| `destroy()` | **Destroy your computer!** |
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Item | Value |
| --------- | -----:|
| Computer | $1600 |
| Phone | $12 |
| Pipe | $1 |
----
#### Special Symbols HTML Entities Codes
© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
### Emoji: smiley:
> Blockquotes :star:
#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [x] [ ] :smiley: this is a complete item :smiley:;
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
- [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
- [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item [test link](#);
#### 反斜杠 Escape
\*literal asterisks\*
### Scientific formula TeX(KaTeX)
$$E=mc^2$$
In-line formula $$E=mc^2$$ In-line formula, in-line $$E=mc^2$$ formula.
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
Multi-line formula:
```math
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
```
`` `katex
\ displaystyle
\ frac {1} { \ Bigl (\ sqrt {\ phi \ sqrt {5}} - \ phi \ Bigr) e ^ { \ frac25 \ pi}} = 1+ \ frac {e ^ { -2 \ pi}} {1+ \ frac {e ^ {- 4 \ pi}} { 1+ \ frac {e ^ {- 6 \ pi}} {1+ \ frac {e ^ {- 8 \ pi} } {1+ \ cdots}} } } `` `
```latex
f(x) = \int_(-\infty)^\infty
\hat f(\xi)\,e^{2 \pi i \xi x)
\,d\xi
```
### Draw flowchart Flowchart
```flow
st=>start: user login
op=>operation: login operation
cond=>condition: login successful Yes or No?
e=>end: enter the background
st->op->cond
cond(yes)->e
cond(no)->op
```
### 绘制序列图 Sequence Diagram
```seq
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
### End
After saving, you can see:
