Support » Plugin: Code Syntax Block » change theme has no line number

  • Resolved Philip Faster

    (@philipfaster)


    Hi,

    thank you for your great plugin.

    But I have some trouble changing its theme, from dark to light or lighter.

    1. I’m trying to upload it into assets/prism/prism-material-light.css
    but it doesn’t work. using snippet “mkaz_prism_css_url” also doesn’t work for me.

    2. Then I’m trying to overwrite assets/prism/prism.css with the new theme, yes it works… But then… There is no “line number” on the front page. even the “Show line numbers” is enabled.

    I’ve tried some other theme from the “Prism themes repo“, and the result is same, no line number.

    Do I miss something?

    • This topic was modified 2 months, 3 weeks ago by Philip Faster.
Viewing 3 replies - 1 through 3 (of 3 total)
  • 1. If you are using a local file for the new theme, you should use the mkaz_prism_theme_css filter, the filter with the _url is intended for use an external resource.

    2. Line Numbers is a plugin to Prism, and not all themes necessarily support it. You can try adding this additional CSS to your file and see if it helps. The CSS was taken from the default theme file here:
    https://github.com/mkaz/code-syntax-block/blob/master/assets/prism/prism.css#L145

    
    pre.line-numbers {
    	position: relative;
    	padding-left: 3.8em;
    	counter-reset: linenumber;
    }
    
    pre.line-numbers > code {
    	position: relative;
    }
    
    .line-numbers .line-numbers-rows {
    	position: absolute;
    	pointer-events: none;
    	top: 0;
    	font-size: 100%;
    	left: -3.8em;
    	width: 3em; /* works for line-numbers below 1000 lines */
    	letter-spacing: -1px;
    	border-right: 0;
    
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    
    }
    
    .line-numbers-rows > span {
    	pointer-events: none;
    	display: block;
    	counter-increment: linenumber;
    }
    
    .line-numbers-rows > span:before {
    	content: counter(linenumber);
    	color: #5C6370;
    	display: block;
    	padding-right: 0.8em;
    	text-align: right;
    }
    

    hi @mkaz,

    1. yes I mean like that, but it doesn’t work on my site…
    nevertheless, I’m using the “overwrite” method.

    2. Great, it works…
    thank you very much.

    Great, glad it helped you out! 👍

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.