【Typora】Habilidades prácticas

Directorio de artículos

prefacio

Comparta algunas habilidades prácticas que usé en el proceso de usar el editor Typora, y las nuevas habilidades continuarán actualizándose más adelante.

Insertar línea en blanco al editar blog

 : agregar a la línea en blanco actual (nota: no se pierda el punto y coma)
<br />: añadir al final de la línea anterior

mas colores

Color de texto personalizado AutoHotkey

AutoHotkey es un programa de lenguaje de secuencias de comandos de teclas de acceso rápido en la plataforma Windows. Puede realizar varias funciones, como ventana superior, entrada rápida y operación rápida, y puede realizar muchas operaciones rápidas y automatizadas a través de scripts personalizados, e incluso crear programas de interfaz gráfica, y requiere muy pocos recursos. Gao Tools, sitio web oficial: https://www.autohotkey.com/

Después de la descarga, cree un nuevo MyHotkeyScript.txtarchivo de texto, abra y copie el siguiente contenido:

#IfWinActive ahk_exe Typora.exe
{
    
    
    !0::addFontColor("black")
    !1::addFontColor("red")
    !2::addFontColor("orange") 
    !3::addFontColor("yellow")
    !4::addFontColor("green")
    !5::addFontColor("cornflowerblue")
    !6::addFontColor("cyan") 
    !7::addFontColor("purple")
}
addFontColor(color){
    
    
    clipboard := "" 
    Send {
    
    ctrl down}c{
    
    ctrl up} 
    ; SendInput {
    
    Text} 
    SendInput {
    
    TEXT}<font color='%color%'>
    SendInput {
    
    ctrl down}v{
    
    ctrl up}
    If(clipboard = ""){
    
    
        SendInput {
    
    TEXT}</font>
    }else{
    
    
        SendInput {
    
    TEXT}</ 
    }
}
; 分号以及分号后的内容代表注释，以下为代码解释
#IfWinActive ahk_exe Typora.exe
{
    
    
	; alt+0 红色
    !0::addFontColor("black")
    ; alt+1 红色
    !1::addFontColor("red")
    ; alt+1 橙色
    !2::addFontColor("orange")
     ; alt+3 黄色
    !3::addFontColor("yellow")
     ; alt+4 绿色
    !4::addFontColor("green")
    ; alt+5 浅蓝色
    !5::addFontColor("cornflowerblue")
     ; alt+6 青色
    !6::addFontColor("cyan") 
   ; alt+7 紫色
    !7::addFontColor("purple")
}

; 快捷增加字体颜色
addFontColor(color){
    
    
    clipboard := "" ; 清空剪切板
    Send {
    
    ctrl down}c{
    
    ctrl up} ; 复制
    ; SendInput {
    
    Text} ; 解决中文输入法问题
    SendInput {
    
    TEXT}<font color='%color%'>
    SendInput {
    
    ctrl down}v{
    
    ctrl up} ; 粘贴
    If(clipboard = ""){
    
    
        SendInput {
    
    TEXT}</font> ; Typora 在这不会自动补充
    }else{
    
    
        SendInput {
    
    TEXT}</ ; Typora中自动补全标签
    }
}

Luego cambie el nombre del archivo a MyHotkeyScript.ahk, haga doble clic en el archivo para ejecutar [Ejecutar con AutoHotkey] y reinicie Typora para usarlo.

Modificar el color del párrafo citado

Pasos para modificar el párrafo citado, resaltar el color del texto:

Clic derecho -> Inspeccionar elemento
En la página emergente, haga clic en la opción con la flecha en la esquina superior izquierda Select an element in the page to inspect it, vuelva al texto original y navegue hasta el párrafo citadoblockquote
Luego modifique el color como se muestra en la figura a continuación, y recuerde modificar el valor HEX del color (como #4db7d4)

Luego abra el archivo del tema (como github.css), busque el siguiente segmento de código y actualice el valor HEX del color modificado:

blockquote {
    
    
    border-left: 4px solid #62bfd8;
    padding: 0 15px;
    color: #75716c;
}

Después de eso, vuelve a abrir Typora y listo.

Insertar vídeo web

Typora es un poderoso editor de Markdown, lo suficientemente poderoso como para insertar videos web directamente dentro de Typora y verlos directamente dentro de Typora.

De hecho, es para insertar código HTML, como el siguiente:

<iframe src="//player.bilibili.com/player.html?aid=35579542&bvid=BV1Yb411c7Hi&cid=62389005&page=1" width="300" height="500" scrolling="no" border="10" frameborder="no" framespacing="no" allowfullscreen="true"> </iframe>

El efecto es el siguiente:
La clave es encontrar el código de inserción correspondiente al video. Por ejemplo, el código de inserción del video en la estación b está aquí:

Luego modifíquelo directamente de acuerdo con el código HTML anterior, incluida la modificación del tamaño, el ancho y la altura del video incrustado.

imagen de inserción personalizada

Escale el ancho de la imagen al 50%, la altura al 70% y la posición a la izquierda. Si la ruta es incorrecta y la imagen no se muestra, mostrará "nombre de la imagen".
- align=left /> hay un espacio después de la izquierda
- No establezca la alineación, el valor predeterminado es centrado

<img src="images\demo.png" width="50%" height="70%" alt="图片名称" align=left />

Establezca el ancho y el alto de la imagen en 600 px y 370 px, y muéstrela a la derecha. Si la ruta es incorrecta y la imagen no se muestra, mostrará el "nombre de la imagen".

<img src="images\demo.png" width = 600px height = 370px alt="图片名称" align=right />

camino relativo

<img src = "images\demo.png" width="700px">

camino absoluto

<img src = "C:\Users\lenovo\Desktop\images\demo.png" width="700px">

PDF de exportación personalizado

Para ajustar el tamaño de fuente, copie el siguiente código en el archivo de tema que está utilizando (por ejemplo, github.css):

/* 修改导出的PDF中内容的格式(字体、图片等) */
@media print {
    
     /* 原CSS中有该属性，添加部分内容或修改部分内容即可 */
    html,
    body {
    
     /* PDF中，源码字体和内容字体的大小 */
        font-size: 12px;
    }
    table,
    pre {
    
    
        page-break-inside: avoid;
    }
    pre {
    
    
        word-wrap: break-word;
    }
}