如何在使用html单击源代码后对其进行着色？

Question

彩色化源代码（由GeSHi或像http://tohtml.com这样的工具），如下所示：

<pre style='color:#000000;background:#ffffff;'>
<ol>
<li><a href="#1"><span style='color:#004a43; '>#</span><span style='color:#004a43; '>include </span><span style='color:#800000; '>&lt;</span><span style='color:#40015a; '>iostream</span><span style='color:#800000; '>></span></a></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>using</span> <span style='color:#800000; font-weight:bold; '>namespace</span> <span style='color:#666616; '>std</span><span style='color:#800080; '>;</span></li></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>int</span> <span style='color:#400000; '>main</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>int</span> intNum <span style='color:#808030; '>=</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li>    </li>
<li>    <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800000; font-weight:bold; '>while</span> <span style='color:#808030; '>(</span>intNum <span style='color:#808030; '>!</span><span style='color:#808030; '>=</span> <span style='color:#008c00; '>42</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li>        <span style='color:#603000; '>cout</span> <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> intNum <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> <span style='color:#800000; '>"</span><span style='color:#0f69ff; '>\n</span><span style='color:#800000; '>"</span><span style='color:#800080; '>;</span></li>
<li>        <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800080; '>}</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>return</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li> </li>
<li><span style='color:#800080; '>}</span></li>
</ol>
</pre>

截图：

在此输入图像描述

我想创建将用户线点击的颜色化机制。 我知道我需要更改特定li元素的背景颜色。 我想知道如何实现这一目标。

这是否可以，添加到每一行：

<li id='id1' > <a href="javascript:color('1')">...</a> </li>

<li id='id2' > <a href="javascript:color('2')">...</a> </li>

是否有必要为每个li元素添加唯一ID？
是否有可能传递给JS函数某种id /“this pointer”/无论什么指向JS函数，应该更改哪个元素？

编辑：

还有一个要求：毕竟，我需要将点击了哪一行的信息传递给URL。 我想在不重新加载网页的情况下这样做，所以我想添加类似#NUMBER_OF_CLICKED_LINE的内容

Answer 1

<script type="text/javascript">
    function color(element) {
        element.style.color="red";
    }
</script> 

<body>
    This is test <span onclick="color(this);">Make it color</span>
</body>

Answer 2

我没有看到jQuery标签，但是如果它是使用Jquery的一个选项，你可以简单地将click事件绑定到<li>如下所示：

$('li').click(function () {
   $(this).css('background', '#somecolor'); 
   /* This will only alter the clicked li element */
});

编辑：

对于您的行号哈希要求，您可以将属性data-linenumber={thelinenumber}到li元素。 （我会避免使用id ，因为它可能与已经存在的其他css / javascript冲突。）

然后将其更改为：

$('li').click(function () {
   $(this).css('background', '#somecolor'); 
   window.location.hash = 'linenumber' + $(this).attr('data-linenumber');
   /* this assumes that your hash is currently empty and/or replaceable. */
});

Answer 3

我相信http://softwaremaniacs.org/soft/highlight/en/会帮助你。

它会自动：找到代码块，检测语言，突出显示它。

图书馆知道41种语言，有16种风格主题。

Answer 4

简单地突出显示列表元素的一种方法是使用：

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
    };  
}

JS小提琴演示。

关于将点击线作为哈希附加到URL的需要（JS Fiddle无法轻易演示的内容）：

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
        lis[i].setAttribute('data-Index',i);
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
        document.location.hash = 'line=' + this.getAttribute('data-index');
    };  
}

JS小提琴演示。

Answer 5

尽管可以，但您不需要在每行上放置id 。 你可能想把这个id放在ol 。 然后你会在这段代码之后编写一些javascript（最好使用jQuery，但不一定），通过id获取ol元素，迭代它的子节点，并且每个子li附加一个单击处理程序。 如果您没有使用像jQuery这样的库，请查看其创建者的一些灵活的点击处理程序代码。

所以最终结果（没有jQuery），如：

<style>
.clickedLine { background-color: red; }
.LetsMakeThatAClassOkay { color:#000; background:#fff; }
</style>
<pre class="LetsMakeThatAClassOkay">
<ol id="codeThatGetsClicked">
<li> line of code </li>
...
</ol>
</pre>
<script>
// Resig's addEvent linked above
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
// What should happen to a line
function colorLine( event ) {
  var line = event.target;
  line.className = "clickedLine";
}
// Applying it
var code = document.getElementById("codeThatGetsClicked");
for(var i = 0; i < code.childNodes.length; i++){
  var child = code.childNodes[i];
  if (child.nodeType == 1 && child.tagName == "li") {
    addEvent(child, "click", colorLine);
  }
}
</script>

现在，使用jQuery，它几乎是一行代码。 我相信你可以阅读相关的文档。

如何在使用html单击源代码后对其进行着色？

问题描述

5 个解决方案

解决方案1
1

解决方案2
1 2011-11-22 16:39:26

解决方案3
1 2011-11-22 16:40:48

解决方案4
1 已采纳 2011-11-22 16:45:29

解决方案5
0 2011-11-22 16:39:46

如何在使用html单击源代码后对其进行着色？

问题描述

5 个解决方案

解决方案1 1

解决方案2 1 2011-11-22 16:39:26

解决方案3 1 2011-11-22 16:40:48

解决方案4 1 已采纳 2011-11-22 16:45:29

解决方案5 0 2011-11-22 16:39:46

解决方案1
1

解决方案2
1 2011-11-22 16:39:26

解决方案3
1 2011-11-22 16:40:48

解决方案4
1 已采纳 2011-11-22 16:45:29

解决方案5
0 2011-11-22 16:39:46