Primero, instalemos el framework Laravel Framework 7.x. Hay muchas formas aquí;
Vaya directamente al sitio web oficial para descargar el paquete fuente de Laravel, o clone el código fuente directamente:
Después de descargar, ingrese al directorio de Laravel:
A continuación, instale Laravel. Hay un preludio. Si no sabe mucho sobre el uso de Composer, puede leer este artículo primero para obtener más información sobre el uso de Composer:
https://blog.csdn.net/lchmyhua88/article/details/88928342
A continuación, inicie la instalación. Debido a que la instalación de entrada de Composer es demasiado lenta, cambie el espejo:
Espere hasta que se complete la instalación, luego instale la clave: generar
Configure la dirección de acceso en nginx:
servidor { escuchar 80; nombre_servidor lch.markdown.com; root "/ htdocs / laravel-master / public /";
index index.html index.htm index.php;
juego de caracteres utf-8;
ubicación / { try_files $ uri $ uri / /index.php?$query_string; }
location = /favicon.ico {access_log off; log_not_found off; }
ubicación = /robots.txt {registro_acceso desactivado; log_not_found off; }
access_log on;
error_log /var/log/nginx/lch.markdown.com-error.log error;
enviar archivo desactivado;
client_max_body_size 100m;
ubicación ~ \ .php $ { fastcgi_split_path_info ^ (. + \. php) (/.+) $; fastcgi_pass unix: /var/run/php/php7.2-fpm.sock; fastcgi_index index.php; incluir fastcgi_params; fastcgi_param SCRIPT_FILENAME $ raíz_documento $ 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;
}
ubicación ~ /\.ht { denegar todo; } }
Reinicie nginx y luego visite:
Luego instale Markdown:
Proceso de instalación
1. Dos formas de instalación
① Edite el archivo de configuración directamente
Agregue lo siguiente a composer.json:
require: { "chenhua / laravel5-markdown-editor": "~ 1.0" } y luego ejecuta la actualización del compositor.
② Ejecutar la instalación del comando
Ejecute el comando:
el compositor requiere chenhua / laravel5-markdown-editor
2. Después de completar las operaciones anteriores, modifique la matriz de proveedores en config / app.php
Chenhua \ MarkdownEditor \ MarkdownEditorServiceProvider :: class,
3. Modifique la matriz de alias en config / app.php
'MarkdownEditor' => Chenhua \ MarkdownEditor \ Facades \ MarkdownEditor :: class,
4. Ejecute el comando artisan para generar el archivo de configuración config / markdowneditor.php
php artisan vendor: publish --tag = markdown
5. Modifique el archivo de configuración config / markdowneditor.php
<? php
return [
"default" => 'local', // Devuelve la URL de la ubicación de almacenamiento por defecto
"dirver" => ['local'], // Plataforma de almacenamiento ['local', 'qiniu', 'aliyun' ]
"connections" => [
"local" => [
'prefix' => 'uploads / markdown', // ubicación de almacenamiento local, cargas predeterminadas
],
"qiniu" => [
'access_key' => '',
'secret_key '=>' ',
' bucket '=>' ',
' prefix '=>' ', // file prefix file / of /
path'domain' => '' // nombre de dominio personalizado de Qiniu
],
"aliyun" => [
'ak_id' => '',
'ak_secret' => '',
'end_point' => '',
'cubo' => '',
'prefijo' => '',
],
],
];
A continuación, agregamos el archivo /routes/web.php:
Route :: get ('/ markDown', function () {
vista de retorno ('markdown');
});
Agregue el archivo markdown.blade.php en el directorio resources / views /:
El contenido es el siguiente:
Después de guardar, visitamos a través del navegador:
Puedes ver que se ha generado el editor, puedes ingresar el contenido en el editor para ver el efecto, por ejemplo, ingrese lo siguiente:
### Principales características
-Soporta sintaxis de estilo Markdown / CommonMark y Github "estándar", y también se puede convertir en un editor de código; -Soporta
vista previa en tiempo real, carga de imágenes (entre dominios), inserción de texto / código / tabla preformateado, plegado de código, búsqueda y reemplazar, modo de solo lectura, temas de estilo personalizado y funciones de resaltado de sintaxis en varios idiomas;
-Compatibilidad con ToC (tabla de contenido), Emoji, listas de tareas,
@link y otra gramática extendida Markdown; -Fórmula científica de soporte TeX (basada en KaTeX), diagrama de flujo del diagrama de proceso y diagrama de secuencia del diagrama de secuencia; -Soporta la
identificación y el análisis de etiquetas HTML, y admite el análisis de etiquetas de filtro personalizado, con seguridad confiable y escalabilidad casi ilimitada;
-Soporta carga modular AMD / CMD (soporte Require.js & Sea.js) y admite extensiones personalizadas;
-Compatible con los navegadores convencionales (IE8 +) y Zepto.js, y es compatible con iPad y otros dispositivos de tableta; -Soporta
estilos de temas personalizados;
# Editor.md
! [] (https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
! [] (https://img.shields.io/github/stars/pandao/editor.md.svg)! [] (https://img.shields.io/github/forks/pandao/editor.md. svg)! [] (https://img.shields.io/github/tag/pandao/editor.md.svg)! [] (https://img.shields.io/github/release/pandao/editor. md.svg)! [] (https://img.shields.io/github/issues/pandao/editor.md.svg)! [] (https://img.shields.io/bower/v/editor. md.svg)
**Tabla de contenido**
[TOCM]
[TOC]
# Encabezado 1
## Encabezado 2
### Encabezado 3
#### Encabezado 4
##### Encabezado 5
###### Encabezado 6
# Encabezado 1 enlace [Enlace de encabezado] (https://github.com/ pandao / editor.md "Enlace de encabezado")
## Enlace de encabezado 2 [Enlace de encabezado] (https://github.com/pandao/editor.md "Enlace de encabezado")
### Enlace de encabezado 3 [Enlace de encabezado] (https : //github.com/pandao/editor.md "Enlace de encabezado")
#### Enlace de encabezado 4 [Enlace de encabezado] (https://github.com/pandao/editor.md "Enlace de encabezado") Enlace de encabezado [ Enlace de encabezado] (https://github.com/pandao/editor.md "Enlace de encabezado")
##### Enlace de encabezado 5 [Enlace de encabezado] (https://github.com/pandao/editor.md "Encabezado link ")
###### Encabezado 6 enlace [Encabezado enlace] (https://github.com/pandao/editor.md "Enlace de encabezado")
#### Encabezado (subrayado)
Este es un H1
=============
Este es un H2
-------------
### Efectos de personajes y líneas horizontales, etc
.----
~~
Tachado ~~ <s> Tachado (cuando el reconocimiento de etiquetas HTML está activado) </s> * cursiva * _italic_
** negrita ** __bold__
*** negrita cursiva *** ___Negrita cursiva___
上 标 ： X <sub> 2 </sub> ， 下 标 ： O <sup> 2 </sup>
** Abreviatura (igual que la etiqueta abbr HTML) **
> Esa es la abreviatura de palabras o frases más largas, siempre que el reconocimiento de etiquetas HTML esté habilitado de forma predeterminada
La especificación <abbr title = "Hyper Text Markup Language"> HTML </abbr> es mantenida por el <abbr title = "World Wide Web Consortium"> W3C </abbr>.
### Cotizaciones en bloque
> Texto citado Blockquotes
Citas en bloque mixtas en la línea entre comillas
> Cita: Si desea insertar un salto de línea en blanco, "a saber, <br /> etiqueta", primero escriba dos o más espacios en el lugar de inserción y presione Entrar, [enlace ordinario] (http: // localhost /).
### Anclas y enlaces
[Enlace normal] (http: // localhost /)
[Enlace común con título] (http: // localhost / "Enlace común con título")
Enlace directo: <https://github.com>
[Enlace de ancla] [ID de ancla]
[identificación del ancla]: http://www.this-anchor-link.com/
Enlace a cola de GFM @pandao
> @pandao
### Códigos de resaltado de código en varios idiomas
#### Código en línea
Ejecute el comando: `npm install mark`
#### Estilo de sangría
Es decir, la sangría es de cuatro espacios, y también se usa para lograr una función similar a `<pre>` Texto Preformateado.
<? php
echo "¡Hola mundo!";
?>
Texto preformateado:
| Primer encabezado | Segundo encabezado |
| ------------- | ------------- |
| Celda de contenido | Celda de contenido |
| Celda de contenido | Celda de contenido |
#### Código JS
`` `
test de función javascript () { console.log (" ¡Hola mundo! "); } (function () { var box = function () { return box.fn.init (); };
box.prototype = box.fn = { init: function () { console.log ('box.init ()');
devuelve esto;
},
agregar: función (str) { alerta ("agregar", str);
devuelve esto;
},
eliminar: función (str) { alerta ("eliminar", str);
devuelve esto;
}
};
box.fn.init.prototype = box.fn;
window.box = caja;
}) ();
var testBox = caja ();
testBox.add ("jQuery"). remove ("jQuery");
''
#### Código HTML Códigos HTML
`` `html
<! DOCTYPE html>
<html>
<head>
<mate charest =" utf-8 "/>
<title> ¡Hola mundo! </title>
</head>
<body>
<h1> ¡Hola mundo! < / h1>
</body>
</html>
`` `
### Imágenes
Imagen:
! [] (https://pandao.github.io/editor.md/examples/images/4.jpg)
> Sigue tu corazón.
! [] (https://pandao.github.io/editor.md/examples/images/8.jpg)
> En la foto: Xiamen Baicheng Beach
Imagen más enlace (Imagen + Enlace):
[! [] (https://pandao.github.io/editor.md/examples/images/7.jpg)] (https://pandao.github.io/editor.md/examples/images/7.jpg "Portada" del primer álbum de Li Jian "Like Water Flowing Years")
> En la foto: la portada del primer álbum de Li Jian "Like Water Flowing Years"
----
### Listas
#### Listas desordenadas (signo menos) Listas
desordenadas (-) -Lista uno
-Lista dos
-Lista tres
#### Lista desordenada (Asterisco) Listas desordenadas (*)
* Lista uno
* Lista dos
* Lista tres
#### Listas desordenadas (signos más y anidamiento) Listas desordenadas (+)
+ Lista uno
+ Lista dos
+ Lista dos-1
+ Lista dos-2
+ Lista dos-3
+ Lista tres
* Lista uno
* Lista dos
* Lista tres
#### Listas ordenadas (-)
1. La primera línea
2. La segunda línea
3. La tercera línea
#### Lista de tareas de GFM
- [x] Lista de tareas GFM 1
- [x] Lista de tareas GFM 2
- [] Lista de tareas GFM 3
- [] Lista de tareas GFM 3-1
- [] Lista de tareas GFM 3-2
- [] Lista de tareas GFM 3-3
- [] Lista de tareas GFM 4
- [] Lista de tareas GFM 4-1
- [] Lista de tareas GFM 4-2
----
### 绘制 表格 Tablas
| Artículo | Precio | Cantidad |
| -------- | -----: |: ----: |
| Computadora | $ 1600 | 5 |
| Móvil | $ 12 | 12 |
| Pipeline | $ 1 | 234 |
Primer encabezado | Segundo encabezado
------------- | -------------
Celda de contenido | Celda de
contenido Celda de contenido | Celda de contenido
| Primer encabezado | Segundo encabezado |
| ------------- | ------------- |
| Celda de contenido | Celda de contenido |
| Celda de contenido | Celda de contenido |
| Nombre de la función | Descripción |
| ------------- | ------------------------------ |
| `ayuda ()` | Muestra la ventana de ayuda. |
| `destroy ()` | ** ¡Destruye tu computadora! ** |
| Alineado a la izquierda | Centro alineado | Alineado a la derecha |
| : ------------ |: ---------------: | -----: |
| col 3 es | un texto prolijo | $ 1600 |
| col 2 es | centrado | $ 12 |
| rayas de cebra | están ordenados | $ 1 |
| Artículo | Valor |
| --------- | -----: |
| Computadora | $ 1600 |
| Teléfono | $ 12 |
| Pipe | $ 1 |
----
#### Códigos de entidades HTML de símbolos especiales
&Copiar; & & uml; &comercio; & iexcl; &libra;
&erio; & lt; & gt; ¥ € & reg; & plusmn; ¶ca; §a; & brvbar; & macr; & laquo; & middot;
X & sup2; Y & sup3; & frac34; & frac14; &veces; &dividir; & raquo;
18 & ordm; C & quot; & apos;
### Emoji: smiley:
> Blockquotes: estrella:
#### Listas de tareas de GFM & Emoji & fontIconos impresionantes emoji & editormd logo emoji: editormd-logo-5x:
- [x]: smiley: @mentions,: smiley: #refs, [links] (), ** formatting **, y <del> tags </del> soportados: editormd-logo :;
- Se requiere sintaxis de lista [x] (se admite cualquier lista ordenada o desordenada): editormd-logo-3x :;
- [x] []: smiley: este es un elemento completo: smiley :;
- [] [] este es un elemento incompleto [enlace de prueba] (#): fa-star: @pandao;
- [] [] este es un elemento incompleto: fa-star:: fa-gear :;
- []: smiley: este es un elemento incompleto [enlace de prueba] (#): fa-star:: fa-gear :;
- []: smiley: esto es: fa-star:: fa-gear: un elemento incompleto [enlace de prueba] (#);
#### 反斜杠 Escape
\ * asteriscos literales \ *
### Fórmula científica TeX (KaTeX)
$$ E = mc ^ 2 $$
Fórmula en línea $$ E = mc ^ 2 $$ Fórmula en línea, fórmula $$ E = mc ^ 2 $$ en línea.
$$ \ (\ sqrt {3x-1} + (1 + x) ^ 2 \) $$
$$ \ sin (\ alpha) ^ {\ theta} = \ sum_ {i = 0} ^ {n} (x ^ yo + \ cos (f)) $$
Fórmula de varias líneas:
`` `matemáticas
\ estilo de visualización
\ izquierda (\ sum \ _ {k = 1} ^ na \ _k b \ _k \ right) ^ 2
\ leq
\ left (\ sum \ _ {k = 1} ^ na \ _k ^ 2 \ derecha)
\ izquierda (\ sum \ _ {k = 1} ^ nb \ _k ^ 2 \ derecha)
`` `
`` `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}} } } ``
`` `látex
f (x) = \ int _ (- \ infty) ^ \ infty
\ hat f (\ xi) \, e ^ {2 \ pi i \ xi x)
\, d \ xi`
``
### Dibujar diagrama de flujo Diagrama de flujo
`` `flujo
st => inicio: inicio de sesión de usuario
op => operación: inicio de sesión operación
cond => condición: inicio de sesión exitoso ¿Sí o No?
e => fin: ingrese el fondo
st-> op-> cond
cond (sí) -> e
cond (no) -> op
`` `
### 绘制 序列 图 Sequence Diagram`
`` seq
Andrew-> China: Says Hello
Note a la derecha de China: China piensa \ nasobre esto
China -> Andrew: ¿Cómo estás?
Andrew - >> China: ¡Estoy bien, gracias!
''
### Fin
Después de guardar, puede ver:
