(JavaScript) tabReplace configure doesn't work #2634

LittleNewton · 2020-07-15T11:21:45Z

`tabReplace` configure doesn't work

I want to use highlight.js in C# so I can build a source code formatting program for Microsoft Word. However, I faced some problem.

I build the developer.html and get the HTML file. I changed it because I want to replace the TAB character to 4 spaces or 8 spaces (any numbers of spaces). My developer.html file is like below:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>highlight.js developer</title>
	<!-- CSS 样式表，背景颜色设置为纯白-->
	<link rel="stylesheet" href="../src/styles/isbl-editor-light.css">

	<style>
		body {
			padding: 0px;
			font-family: sans-serif;
		}
		.editor textarea {
			display: block;
			width: 100%;
			height: 30em;
		}
		h3 {
			margin: 0 0 0.5em;
			font-size: 1.1em;
		}

		pre code,
		pre output {
			display: block;
			padding: 0px !important;
		}

		pre output {
			display: block;
			overflow: auto;
			padding: 0em;
			background: #ffffff;
		}

		.hljs-debug {
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<script src="../build/highlight.js"></script>
	<script src="../demo/jquery-2.1.1.min.js"></script>
	<div class="editor">
		<!--这是代码区域-->
		<h3>源代码</h3>
		<div>
			<!-- 在这个 Text Area 里输入代码-->
			<textarea>在此处输入源代码</textarea>
			<p>
				<button id="update-highlighting">生成高亮 HTML</button>
				语言：<select class="languages"><option value="">(Auto)</option></select>
			</p>
		</div>
		<div>
			<h3>渲染时间：<span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</h3>

			<script>
				hljs.configure({
					tabReplace: '    '
				});
				hljs.initHighlightingOnLoad();
			</script>
			<!--显示渲染后的代码-->
			<pre><code class="hljs">...</code></pre>
		</div>
	</div>

	<script>
		hljs.debugMode();

		$(document).ready(
			function() {
				// 选择语言模式
				var select = $('.languages');
				hljs.listLanguages().forEach(
					function(l) {
						select.append('<option>' + l + '</option>');
				
					}
				);

				// 单击 生成高亮 HTML 按钮时的行为
				$('.editor button#update-highlighting').click(
					function(e) {
						var editor = $(this).parents('.editor');
						var language = editor.find('.languages').val();
						var source = editor.find('textarea').val();
						
						// 开始时间
						var start_time = +new Date();
						
						// result 就是渲染结果，此处使用了三操作数代码
						// 如果语言被设置好了，那么执行 highlight(lang, source, true)
						// 否则，执行 highlightAuto 自动化
						var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
						
						// 得到总渲染时间
						var rendering_time = +new Date() - start_time;
						
						editor.find('.hljs').html(result.value);
						$(".hljs span").each((_,el) => {
							$(el).attr("data-klass", el.className.replace("hljs-",""))
						})
						
						var rendering_stats = result.language + ': relevance ' + (result.relevance );
						if (result.second_best) {
							rendering_stats += ', ' + result.second_best.language + ': ' + (result.second_best.relevance || result.second_best.r);
						}
						editor.find('.rendering_stats').text(rendering_stats);
						editor.find('.rendering_time').text(rendering_time);
						editor.find('output').text(result.value);
						SourceStore.save(source, language);
					}
				);
			}
		);

		var SourceStore;

		(function() {
			SourceStore = {
				save: function(source, lang) {
					localStorage.setItem(key_SOURCE, source);
					localStorage.setItem(key_LANG, lang);
				},
				resolve: function() {
					return [
						localStorage.getItem(key_SOURCE),
						localStorage.getItem(key_LANG)
					];
				}
			};

			var key_SOURCE = 'hljs-source';
			var key_LANG = 'hljs-lang';
			$(function() {
				var data = SourceStore.resolve();
				if (data == null) return;
				$('.editor textarea').val(data[0]);
				$('.editor .languages').val(data[1]);
				$('.editor button').click();
			});
		}());
	</script>
</body>
</html>

I think the key configure syntax is

<script>
	hljs.configure({
		tabReplace: '    '
	});
	hljs.initHighlightingOnLoad();
</script>

and I put these code in line 60-65.

The problem is this configure doesn't work . Could anyone tell me about how to correctly put this configure scripts?

The text was updated successfully, but these errors were encountered:

joshgoebel · 2020-07-15T11:52:49Z

Looks right at a quick glance. Please create a reproducible JSFiddle example. You can fork mine if it helps.

https://jsfiddle.net/ajoshguy/2bmdswn6/27/

My first guess would be that you think you have tabs but really you don't.

joshgoebel · 2020-07-18T19:03:16Z

Ping.

LittleNewton · 2020-07-18T20:59:40Z

I have tried many times.

I have stop the TAB Replacing job and now I just want to make the calling from C# (Form in VSTO) work well.

Microsoft's API doesn't give me enough debug info. My code can be compiles but cannot run.

joshgoebel · 2020-07-21T00:05:36Z

We can't help if you can't provide a reproducible case with just the core library that we can look at. Sounds like you're doing a lot of complex stuff and the problem is quite likely with your code, not ours.

LittleNewton · 2020-07-21T00:16:55Z

@yyyc514

I am sorry for not providing a reproducible case. The jsfiddle online tools seems cannot upload a project.

I want to develop a Microsoft Word Add-In (developed in C#) which can help the user to insert highlighted code in their word document.

I am convinced your Highlight.js is excellent.

But I cannot use .Net C# to call JavaScript in my project.

I will try my best in the later several days.

Thanks!

joshgoebel · 2020-07-21T00:41:33Z

The jsfiddle online tools seems cannot upload a project.

No, that's the whole point. You have to create a baby project that just shows the bug with our library alone. This proves it is not a problem with your integration - and gives us a test case to use when trying to solve the problem.

The tabReplace code is pretty simple, so it's hard to believe it's broken. (although you never know)

If you use the library on it's own and it works but then it breaks inside your project, changes are it's your project at fault - and sadly we aren't experts on that.

LittleNewton added bug help welcome Could use help from community language labels Jul 15, 2020

LittleNewton closed this as completed Jul 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(JavaScript) tabReplace configure doesn't work #2634

(JavaScript) tabReplace configure doesn't work #2634

LittleNewton commented Jul 15, 2020 •

edited

Loading

joshgoebel commented Jul 15, 2020 •

edited

Loading

joshgoebel commented Jul 18, 2020

LittleNewton commented Jul 18, 2020

joshgoebel commented Jul 21, 2020

LittleNewton commented Jul 21, 2020

joshgoebel commented Jul 21, 2020 •

edited

Loading

(JavaScript) tabReplace configure doesn't work #2634

(JavaScript) tabReplace configure doesn't work #2634

Comments

LittleNewton commented Jul 15, 2020 • edited Loading

tabReplace configure doesn't work

joshgoebel commented Jul 15, 2020 • edited Loading

joshgoebel commented Jul 18, 2020

LittleNewton commented Jul 18, 2020

joshgoebel commented Jul 21, 2020

LittleNewton commented Jul 21, 2020

joshgoebel commented Jul 21, 2020 • edited Loading

LittleNewton commented Jul 15, 2020 •

edited

Loading

`tabReplace` configure doesn't work

joshgoebel commented Jul 15, 2020 •

edited

Loading

joshgoebel commented Jul 21, 2020 •

edited

Loading