ورود

View Full Version : گفتگو: من می خوام Htghlight Syntax با این Highlight.js داشته بام.


ROSTAM2
چهارشنبه 14 شهریور 1403, 16:57 عصر
highlight.js - npm (npmjs.com) (https://www.npmjs.com/package/highlight.js)

بصورت کلی یک فرآیند داره اما رنگ های اون کد بدرستی و کامل نیست: (برای HTML)

156021

<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>


برای استفاده کد هم :

<pre><code class="language-html">...</code></pre>


نمونه سند HTML برای VBNET

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="./styles/default.min.css">
<script src="./highlight.min.js"></script>


<script>hljs.highlightAll();</script>




<style>
pre , code{
padding: 0px;
padding-left: 10px;
background-color:snow !important;
font-size: 18px !important;
}
</style>
</head>


<body>
<pre><code class="language-vbnet"> Dim Contents As New List(Of String)
Dim WebSiteItem As Websites
Dim Value As String = ""
With My.KeyStoreData
For I = 1 To 50
ChDir(Application.StartupPath)
'Value = String.Format("{3}) FirstName: {4}{0} LastName: {5}{0} UserName: {1}{0} Password: {2}", vbTab,
' IO.Path.GetFileNameWithoutExtension(IO.Path.GetTem pFileName).ToLower,
' Guid.NewGuid.ToString.Replace("-", ""), I,
' IO.Path.GetFileNameWithoutExtension(IO.Path.GetTem pFileName).ToLower.Replace("tmp", "BusinessMan"),
' IO.Path.GetFileNameWithoutExtension(IO.Path.GetTem pFileName).ToLower.Replace("tmp", "Number"))
WebSiteItem = New Websites With {.ID = Guid.NewGuid, .Title = IO.Path.GetFileNameWithoutExtension(IO.Path.GetTem pFileName).ToLower.Replace("tmp", "Number"),
.Address = "BusinessMan",
.UserName = IO.Path.GetFileNameWithoutExtension(IO.Path.GetTem pFileName).ToLower.ToHashedString(ProtectionKey),
.Password = Guid.NewGuid.ToString.Replace("-", "").ToHashedString(ProtectionKey), .Date = Now, .LastModified = Now,
.UserAccount = My.UserAccount.ID, .Mobile = "09360000000".ToHashedString(ProtectionKey), .EMail = "Skip".ToHashedString(ProtectionKey)}
.AddToWebsites(WebSiteItem)
Application.DoEvents()
Next
.SaveChanges(True)
End With
</code></pre>
</body>
</html>


دانلود Highlight.js: (همه زبانهایی که می خواید باید انتخاب و روی کلید Download کلیلک کنید....)

Download a Custom Build - highlight.js (highlightjs.org) (https://highlightjs.org/download)

راهنما:
Highlight.js — highlight.js 11.9.0 documentation (highlightjs.readthedocs.io) (https://highlightjs.readthedocs.io/en/latest/readme.html)
ROSTAM2
چهارشنبه 14 شهریور 1403, 20:32 عصر
تا حدودی بهتر شد.

156029

این اسکریپات و استایل رو تغییر دادم:

<link rel="stylesheet" href="./styles/default.css">
<script src="./highlight.js"></script>


و رفتم تو سند CSS از استایل و رنگ ها رو تغییر دادم....

pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px
}
/*!
Theme: Default
Description: Original highlight.js style
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
Maintainer: @highlightjs/core-team
Website: https://highlightjs.org/
License: see project LICENSE
Touched: 2021
*/
/*
This is left on purpose making default.css the single file that can be lifted
as-is from the repository directly without the need for a build step


Typically this "required" baseline CSS is added by `makestuff.js` during build.
*/
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em
}
code.hljs {
padding: 3px 5px
}
/* end baseline CSS */
.hljs {
background: #F3F3F3;
color: #444
}
/* Base color: saturation 0; */
.hljs-subst {
/* default */
/* Added by ROSTAM */
color: cornflowerblue;
}
/* purposely ignored */
.hljs-formula,
.hljs-attr,
.hljs-property,
.hljs-params {
/* Added by ROSTAM */
color: aqua;
}
.hljs-comment {
color: forestgreen;
}
.hljs-tag,
.hljs-punctuation {
color: #444a;
}
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr {
color: #444
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold
}
.hljs-keyword{
color: blue;
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
color: #ab5656
}
/* Language color: hue: 90; */
.hljs-literal {
color: blue; /* #695 */
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199
}
.hljs-meta .hljs-string {
color: #38a
}
/* Misc effects */
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}
ROSTAM2
چهارشنبه 14 شهریور 1403, 20:43 عصر
حالا بهتر تر شد:

156030

سند CSS این کلاس بصورت تکی اضافه شد:

/* .hljs-built_in As Single Added by ROSTAM */
.hljs-built_in{
color: blue !important;
}