highlightjs

川长思鸟来 2022-12-21 03:08 186阅读 0赞

## 官网 ##

https://highlightjs.org/

## 测试html页面 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>high light js index</title>
    <link rel="stylesheet" href="/webjars/highlightjs/styles/atelier-cave-dark.css">
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/highlightjs/highlight.min.js"></script>
    <script> hljs.initHighlightingOnLoad(); </script>
    </head>
    <body>
    	<h1>language-javascript</h1>
    	<pre><code class="lang-javascript">
    function init(){
    	$scope.req.getArticle();
    	$('pre code').each(function(i, block) {
    		hljs.highlightBlock(block);
    	});
    }
    	</code></pre>
    	
    	
    	<h1>language-html</h1>
    	<pre><code>
    package org.webjars.test;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class TestApplication {
    	public static void main(String[] args) {
    		SpringApplication.run(TestApplication.class, args);
    	}
    }
    	</code></pre>
    		
    
    	<h1>language-css</h1>
    	<pre><code>
    .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      background: #002b36;
      color: #839496;
    }
    	</code></pre>
    		
    </body>
    </html>

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjY0MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjY0MjM3_size_16_color_FFFFFF_t_70]: /images/20221120/4729d7d869c941ff94758b97d3870636.png